用 vue-cli 手脚架 建立一个 webpack 模板 vue 项目

用 vue-cli 手脚架 建立一个 webpack 模板 vue 项目

一：vue 环境安装

如果环境安装好了，可以直接用vue-cli手脚架生成 模板项目， 一般用的是webpack模板。

1.去官网安装nodejs -- 查看是否安装成功：node -v 

2.安装npm淘宝镜像，淘宝镜像网址：https://npm.taobao.org/ 
	如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	
3.用cnpm 安装 vue-cli 手脚架 -- 最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
	npm install -g vue-cli

4.查看以上是否安装成功： node -v  . npm -v  . cnpm -v . vue -V(大写)
	如果提示“无法识别 'vue' ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

二：用 vue-cli 生成 webpack 模板项目

1.生成项目： vue init webpack objName
	webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
	objName 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
	
2.安装依赖： npm install 
	安装开发环境和本地环境的所有依赖包
	
3.启动项目： npm run dev
	如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config > index.js

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ’ ./ '（原本为 ’ / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ’ / ’ 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

三：打包

npm run build

自己的项目文件都需要放到 src 文件夹下,
项目开发完成之后，可以输入 npm run build 来进行打包工作,
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看,
项目上线时，只需要将 dist 文件夹放到服务器就行了。