vue 项目环境搭建以及创建项目并打包

一.环境搭建
1.官网下载node，并安装node，完成后cmd进入命令行，输入node -v npm-v 查看node和npm版本，如果出现版本号证明安装正常

2、安装淘宝镜像
① 因为国内npm特别慢，推荐使用淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
执行之后就可以用cnpm安装模块了
②安装yarn
npm install -g yarn
3.安装vscode
二.创建项目
1.全局安装vue-cli
打开vscode，在“”终端“中输入“cnpm install vue-cli -g“

2.vue list检查vue-cli是否安装成功，出现以下界面则表示成功

vue -V 可以查看vue-cli安装版本号
3.安装项目
cd 到想创建项目的位置，本演示项目创建在f盘根目录
① 输入 vue init webpack myproject
一路enter，到install vue-router（是否安装路由？）选yes，其它都选no。

② 或者输入 vue create 项目名 也可以安装项目

4.vscode中选择菜单 文件-》打开文件夹 找到自己刚刚创建的项目打开
5.运行项目
①vscode中选择菜单 查看-》终端，打开终端窗口，输入npm run dev 运行项目
②yarn serve 或npm run serve

在浏览器中打开运行地址即可访问项目，出现下图证明项目创建成功了

三.打包

1.为防止打包后找不到文件路径，需要先修改config文件夹中的index.js文件，build模块中的assetsPublicPath路径。
assetsPublicPath: ‘/’, 修改为 assetsPublicPath: ‘./’
2.在终端中输入命令npm run build进行打包，生成后的文件在dist文件夹下，在浏览器中打开index.html即可查看打包后的项目。