用 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 文件夹放到服务器就行了。