全局安装vue-cli（已经安装可忽略此步，在vue3.x的版本中与此已经不同，在创建vue项目时先保证安装好了node环境）
$ npm install -g vue-cli
初始化项目（创建一个vue项目的文件夹）
$ vue init webpack project-name
执行以上命令后，相关模块可视情况而定决定是否安装， ESlint模块慎装
微信图片_20190513111211.png
进入项目文件夹
$ cd project-name
安装所依赖的包(初始化项目时可跳过此步，执行该命令会按照项目package.json里面的安装的依赖将项目运行需要的依赖依次装好)
$ npm install
开发环境运行
$ npm run dev
运行后的视图
微信图片_20190513112023.png
进行编译打包
$ npm run build
关于安装相关依赖时添加的不同后缀的差别
npm install 本身就有一个别名 可以简写为npm i
npm i module_name -S 即 npm install module_name --save 写入dependencies，发布到生产环境
npm i module_name -D 即 npm install module_name --save-dev 写入devDependencies，发布到开发环境
npm i module_name -g 即 global全局安装(命令行使用)
npm i module_name 即 本地安装(将安装包放在 ./node_modules 下)
dependencies与devDependencies的区别
devDependencies 里面的插件只用于开发环境，不用于生产环境
dependencies 是需要发布到生产环境的
比如：开发一个前端项目，在项目中你需要使用一个包构建你的开发和本地运行环境,这时你就要放到dependencies里。gulp是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。
执行完以上命令，你就创建了一个最原始的vue项目的模板，以后就可以在这个基础上去根据需求开发你的需求了
一个原始的vue项目的目录结构 如下图：
微信图片_20190513112412.png
微信图片_20190513112637.png
assets 目录下用于存放图片等静态资源
components 组件文件夹
router 路由配置文件
index.html首页
main.js主程序入口
node_modules 安装的依赖包所在的文件夹
package.json文件记录了项目所需要的依赖 当node_modules文件夹没有或者缺失的时候，执行npm install 可以根据该文件将需要的依赖重新安装
App.vue将来运行项目时替换掉index.html文件下id为app的dom模板
安装淘宝镜像cnpm
npm install -g cnpm
安装vue-cli
$ cnpm install -g vue-cli
初始化项目
$ vue init webpack project-name
进入项目文件夹
$ cd project-name
安装所依赖的包
$ cnpm install
开发环境运行
$ cnpm run dev
进行编译打包
$ cnpm run build
以上就是如何使用vue2.0来构建一个最原始的vue项目
网友评论