Build a Vue. js development environment and build a vue. js Development Environment

Build a Vue. js development environment and build a vue. js Development Environment

I. Introduction

What is Vue. js?

Vue. js (pronunciation/vju example/, similar to view) is a setProgressive framework. Different from other heavyweight frameworks, Vue adopts a bottom-up and incremental development design. The core Vue Library only focuses on the view layer and is easy to learn. It is easy to integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

The goal of Vue. js is to implement it through APIS as simple as possible.Response Data BindingAndCombined view Components.

Vue. js is a MVVM framework. If you have angular experience, you will be able to get started with Vue soon.

Features of vue. js:

Easy to use: HTML, CSS, JavaScript? Read the Guide to build an application!

Flexibility: simple and small core, incremental technology stack, enough to cope with any scale of applications.

Efficient: 16 KB min + gzip running size, ultra-fast virtual DOM, the most worry-free Optimization

II. Environment Construction

Recommended Development Environment for vue:

Node. js: javascript runtime environment. Different systems run different programming languages directly.

Npm: Package Manager under Nodejs

Webpack: it is mainly used to prepare static resources to be released on all browsers through CommonJS syntax, such as merging and packaging resources.

Vue-cli: User-Generated Vue Project template

Start installation:

1. Skip node. js because I have already installed it.

2. webpack

npm install webpack -g

3. Install vue scaffolding

npm install vue-cli -g

Test:

Find a folder on the hard disk for engineering purposes, and enter the directory in the terminal

Cd directory path

Create a project based on the template

Vue init webpack-simple project name <project name cannot be Chinese> or vue init webpack-simple #1.0 project name created for vue1.0 <project name cannot be Chinese>

Project directory:

Install project dependencies:

Install vue routing module vue-router and network request module vue-resource

Enter the project to execute

npm install vue-router vue-resource --save

Start the project

npm run dev

An error is reported when running

'Node _ env' is not an internal or external command, or a program or batch file that can be run. Npm ERR! Windows_NT 6.1.7601npm ERR! Argv "D: \ nodejs \ node.exe" "D: \ nodejs \ node_modules \ npm \ bin \ npm-cli.js" "start" npm ERR! Node v4.0.0-rc.5npm ERR! Npm v2.14.2npm ERR! Code ELIFECYCLEnpm ERR! Yy-ydh-web@1.0.7 start: 'npm run clear & NODE_ENV = development & webpack-dev-server -- host 0.0.0.0 -- devtool eval -- progress -- color -- profile 'npm ERR! Exit status 1npm ERR! Npm ERR! Failed at the yy-ydh-web@1.0.7 start script 'npm run clear & NODE_ENV = development & webpack-dev-server -- host0.0.0.0 -- devtool eval -- progress -- color -- profile '. npm ERR! This is most likely a problem with the yy-ydh-web package, npm ERR! Not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! Npm run clear & NODE_ENV = development & webpack-dev-server -- host 0.0.0.0 -- devtool eval -- progress -- color -- profilenpm ERR! You can get their info via: npm ERR! Npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! D: \ workspace \ node_modules \ yy-ydh-web \ npm-debug.log

This method does not support NODE_ENV = development in windows.

Solution:

● Install kernel SS-env: npm install cross-env -- save-dev

● Add cross-env before NODE_ENV = xxxxxxx.

Running or error:

The webpack module cannot be found.

module.js:457 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

Install this module:

Ccnpm install Module name -- save-dev (about the environment, the npm run dev cannot be started) cnpm install Module name -- save (about the project, such as main. js. The console reports an error after npm run dev is successful. For example, escape-string-regexp, strip-ansi, has-ansi, is-finite, and emojis-list.

After installation, the following error is reported:

Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

Continue to install

cnpm install bl --save-dev

Run again:

npm run dev

Access: http: // localhost: 8080/running successful