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

一.环境搭建
1.官网下载node,并安装node,完成后cmd进入命令行,输入node -v npm-v 查看node和npm版本,如果出现版本号证明安装正常
vue 项目环境搭建以及创建项目并打包
2、安装淘宝镜像
因为国内npm特别慢,推荐使用淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
执行之后就可以用cnpm安装模块了
3.安装vscode
二.创建项目
1.全局安装vue-cli
打开vscode,在“”终端“中输入“cnpm install vue-cli -g“

2.vue list检查vue-cli是否安装成功,出现以下界面则表示成功
vue 项目环境搭建以及创建项目并打包
3.安装项目
cd 到想创建项目的位置,本演示项目创建在f盘根目录
输入 vue init webpack myproject
一路enter,到install vue-router(是否安装路由?)选yes,其它都选no。
vue 项目环境搭建以及创建项目并打包
4.vscode中选择菜单 文件-》打开文件夹 找到自己刚刚创建的项目打开
5.vscode中选择菜单 查看-》终端,打开终端窗口,输入npm run dev 运行项目
vue 项目环境搭建以及创建项目并打包
在浏览器中打开运行地址即可访问项目,出现下图证明项目创建成功了

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

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