系列文章：
安装Nodejs、NPM
NodeJS：JavaScript运行环境。在官网下载安装包安装即可
安装完成后检查下版本：node -v
NPM：全称为Node Package Manager,是一个基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器
NPM常用命令：
npm -v: 查看npm版本号npm init: 初始化项目，会生成一个package.json文件npm install: 安装插件，缩写npm i，会根据package.json文件安装插件npm install vue-cli -g: 安装插件vue-cli，-g是参数，global全局的意思npm install axios --save: 安装插件axios,--save是把安装的信息记录到package.json文件的dependencies项中的意思npm install less less-loader --save-dev: 安装less和less-loader两个插件,--save-dev是把安装的信息记录到package.json文件的devDependencies项中的意思npm run dev:package.json文件中scripts项中有dev的配置，执行的就是配置中的命令。npm run dev可以理解成这个命令的快捷方式
安装vue-cli
vue-cli是vue官方提供的一个构建工具，用来快速构建一个vue项目。能让你得到一个根据最佳实践设置的项目模板。该项目使用vue-cli脚手架搭建
先全局安装：npm install vue-cli -g
安装成功后检查一下：vue -V
初始化项目
执行命令：vue init webpack wap-vue-vux
其中wap-vue-vux是项目名称，自定义即可
执行过程中，会有几个选项需要选择
Project name： 这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车Install vue-router: 是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件Use ESLint to lint your code: 是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置Setup unit tests with Karma + Moch?: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是NSetup e2e tests with Nightwatch： 是否安装e2e测试，这里我也同样选择的是N
项目目录结构介绍
| 目录或文件 | 介绍 |
|---|---|
build/ |
项目打包相关配置，webpack相关配置都在这里。修改此目录下的文件后，需要重新运行npm run dev |
config/ |
项目配置目录，分不同环境配置。修改此目录下的文件后，需要重新运行npm run dev |
node_modules/ |
下载的插件目录。如果没有，运行命令npm install |
src/ |
项目源文件所在目录，以后开发基本上都在此目录下进行 |
src/assets/ |
项目资源目录，存放图片、css等静态文件；该目录下的文件在项目打包时会打包 |
src/components/ |
组件目录 |
src/router/ |
路由文件目录 |
src/App.vue |
主组件 |
src/main.js |
入口文件 |
static/ |
静态资源目录，存放图片等静态资源；该目录下的文件在项目打包时不会打包，只是自动复制到对应目录下 |
.babelrc |
babel配置文件 |
.editorconfig |
编辑器的配置文件 |
.eslintignore |
eslint忽略的文件和目录 |
.eslintrc.js |
eslint配置文件 |
.gitignore |
git忽略的文件和目录 |
postcssrc.js |
postcss配置文件 |
index.html |
模板文件 |
package.json |
package.json |
README.md |
项目帮助文件 |
常用命令
npm run dev：运行开发环境。在浏览器中输入网站（默认http://localhost:8080）可查看开发环境效果npm start：效果同npm run devnpm run build：项目打包，打包后的项目需要放在虚拟主机下访问
发表评论