1 安装  NPM,安装nodejs自带NPM,这个不是重点不详细说。
2 安装 webpack,npm install webpack -g 执行全局安装,这个不是重点不详细说。
3 安装 vue-cli 执行命令:npm install -g vue-cli
  vue-cli脚手架创建vue项目并打包运行
 4 查询vue版本 执行命令:vue -V
    vue-cli脚手架创建vue项目并打包运行
 5  创建项目目录G:\net\web\vue-cli-demo,进入项目目录执行命令: vue init webpack
  vue-cli脚手架创建vue项目并打包运行
6  执行命令:npm install,安装依赖看到以下项目结构,头大啊,看不懂目录结构的自学下 webpack
vue-cli脚手架创建vue项目并打包运行
7   运行项目执行命令:Npm run dev
vue-cli脚手架创建vue项目并打包运行
8 如果出现错误8080端口错误,修改config/index.js文件内容,修改端口号
vue-cli脚手架创建vue项目并打包运行
 9 再次运行项目执行命令:Npm run dev

vue-cli脚手架创建vue项目并打包运行
 vue-cli脚手架创建vue项目并打包运行
10 本地运行成功,这里算完成80%。
11 打包上线,执行命令npm run build
vue-cli脚手架创建vue项目并打包运行
 12 打包完成后,会生成 dist 文件夹,项目上线时,只需要将 dist 文件夹放到服务器就行了。
vue-cli脚手架创建vue项目并打包运行
13 浏览 dist/index.html,发现出错了,引用的js和css找不到路径。
14 修改config/index.js文件内容,将 assetsPublicPath: '/' 改为  assetsPublicPath: './'
vue-cli脚手架创建vue项目并打包运行
 15 浏览 dist/index.html成功运行 
 vue-cli脚手架创建vue项目并打包运行
 

  

相关文章: