vue项目构建

安装vue脚手架

• 安装node：https://nodejs.org/zh-cn/
  -查看node版本：node --version
• 安装npm：node安装后自动安装npm
  -查看npm版本：npm --version
  -运行依赖：--save
  -开发依赖：-dev
  -全局安装：-g
  -查询全局安装过的包：npm list -g --depth 0
  -查询项目安装过的包：npm list --depth 0
• 安装包：
  -全局安装vue脚手架库：
  npm install -g vue-cli

初始化项目

• 使用webpack构建vue项目：vue init webpack vue-item

//初始化创建自动生成的文件夹、文件
vue-item
    |-- build : webpack 相关的配置文件夹(基本不需要修改)
        |-- dev-server.js : 通过 express 启动后台服务器
    |-- config: webpack 相关的配置文件夹(基本不需要修改)
        |-- index.js: 指定的后台服务的端口号和静态资源文件夹
    |-- node_modules: 第三方依赖模块文件夹
    |-- src : 源码文件夹
        |-- components: vue 组件及其相关资源文件夹
        |-- App.vue: 应用根主组件
        |-- main.js: 应用入口 js
    |-- static: 静态资源文件夹
    |-- .babelrc: babel 的配置文件
    |-- .eslintignore: eslint 检查忽略的配置
    |-- .eslintrc.js: eslint 检查的配置
    |-- .gitignore: git 版本控制忽略的配置
    |-- index.html: 主页面文件
    |-- package.json: 应用包配置文件
    |-- README.md: 应用描述说明的 readme 文件

构建项目

运行、打包

• 运行vue项目：
  -cd vue-item
  -npm run start启动项目，在 http://localhost:3000查看项目运行
• 打包vue项目：
  -npm run build项目打包，生成一个dist文件夹

调试

• chrome安装Vue.js devtools开发者工具：http://www.cnplugins.com/