Super-simple to use vue-cli + webpack scaffolding to build the project vue
Environment to build
Talk about building a few steps vue project, follow these steps to build my environment, build a vue program can be run up, basically the first step in the entry:
Installation node.js
installation webpack
install vue-cli scaffolding build tools
project build
First, install node.js
download and install node.js node from the official website, the installation process is very simple, all the way "Next" on it (fool-installed). After installation, the open command line tool (win + r, and then enter cmd), the input node -v, as follows, if the corresponding version number occurs, the installation is successful.
C:\Users\g580>node -v
v9.8.0
After installing node.js, it already comes npm (package management tool), and view the version number by using the command npm npm -v, as follows:
C:\Users\g580>npm -v
v5.6.0
Second, the installation webpack
before npm (package management tool) has been installed successfully, subsequent operations use npm named to operate.
Open a command line tool, type: npm install webpack -g, -g represents the global installed, enter webpack -v After the installation is complete, the following appeared in the version, then the installation was successful.
C:\Users\g580>webpack -v
v4.1.1
Third, the installation tool constructed scaffolding vue-cli
open command line tool, type: npm install vue-cli -g, input vue -V (note the capital "V"), after the installation is complete, the following, a corresponding version number, then Successful installation.
C:\Users\g580>vue -V
v2.9.3
Four, vue-cli build the project
by more than three steps, the initial environment has basically built a good, you can build and initialize the following vue project.
4.1 Create a directory for work (I was workplace, you are free) or choose an existing directory used to store items
4 ... 2 Open a command tool, enter the working directory, enter the command line vue init webpack Project name:
C:\Users\g580>workplace>vue init webpack project(项目名)
注：项目名不能大写，不能使用中文,使用上述命令初始化一个vue项目，其中webpack是构建工具，project是整个项目文件夹的名称，这个文件夹会自动生成在你的工作目录中。下面是构建过程：
$ vue init webpack project--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了project这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (project)---------------------项目的名称（默认是文件夹的名称）
? Project name project
? Project description (A Vue.js project)---------------------项目描述，可以不写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1
? Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），回车默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
cd project)--------------------进入你安装的项目
npm install)--------------------安装项目依赖
npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)
Built, you can see the project the following structure, which is the file in the project file:
4.3 installation project dependencies
into the project folder, shift + right, select the menu: Open a command window here to open cmd command tool. Or directly use the command cd into the project folder. input the command:
C:\Users\g580>project>npm install
4.4 Run the project
into the project folder, shift + right, select the menu: Open a command window here, enter the command:
C:\Users\g580>project>npm run dev
Implementation of the completion:
Open your browser and enter the address: HTTP: // localhost: 8080 , the first not in a hurry to close the command tool yo, because running locally, it can not run off.
If you do not appear on the map, it may your 8080 port is occupied, you can switch to another port in the config will dev / index.js in.
This, by the end of vue scaffolding to build the project.
Vue.js recommendations or learning to learn and understand about html, css, js these related knowledge, such as knowledge and understanding, and again js-depth study would be better.