麦子学院 2018-04-12 12:29
Vue.js 中使用vue-cli如何初始化项目？
回复:0 查看:2945
一、安装步骤
step1、安装Node.js
首先需要下载并安装Node.js
，下载地址：
Node
官网。
可查看我的另外一篇文章，仅作参考：Node.js
入门及安装
测试安装是否成功，打开cmd
，使用
node -v
，如果显示版本号则表示安装成功。
step2、安装vue-cli
使用vue-cli
（脚手架）搭建项目，
vue-cli
是
Vue
官方提供的用于搭建基于
vue+webpack+es6
项目的脚手架工具。
GitHub
地址：
vue-cli
全局安装：-g
表示全局安装
vue-cli
npm install -g vue-cli
如果安装较慢，可以使用淘宝镜像安装。
cnpm install -g vue-cli
step3、初始化项目
初始化基于webpack
的模板项目，
projectName
为项目名称，可以自动生成目录及相关文件，跟
express
生成器差不多。
vue init webpack projectName
在初始化的过程中会询问一些相关的说明和配置，这些说明和配置会写入package.json
文件中，会自动生成对应的模块。
如果需要使用ESLint
规范和相关的
unit test
和
e2e
，请输入
yes
，这样初始化出来的项目，会自动配置好对应的模块。
step4、 下载项目依赖模块
定位到项目根目录，下载项目依赖的所有模块。
npm install
step5、运行项目
定位到项目根目录下，使用命令：
npm
run dev
使用命令运行项目，在浏览器中输入
http://localhost:8080
可访问。
整体过程：
#
全局安装
vue-clinpm install -g vue-cli
#
创建一个基于
webpack
模板的新项目
vue init webpack projectName
#
安装依赖，先定位到项目根目录，然后安装
cd projectNamenpm install
#
运行项目
npm run dev
二、目录说明
项目文件需要放到 src
文件夹下，相关的部分静态资源需要放在
static
文件夹下。
项目开发完成之后，可以输入 npm run build
来进行打包工作
npm
run build
打包完成后，会生成 dist
文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist
文件夹放到服务器就行了。
来源：网络