vue----创建vue-cli应用程序

第一个 vue-cli 应用程序

什么是 vue-cli

vue-cli 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架；可以参考 LeeSite 项目骨架生成工具），用于快速生成一个 vue 的项目模板

主要功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

环境准备

• Node.js（>= 6.x，首选 8.x）
• git

安装 vue-cli

• 安装 Node.js

请自行前往 http://nodejs.cn/download 官网下载安装，此处不再赘述

NPM软件包:https://www.npmjs.com/

• 安装 Node.js 淘宝镜像加速器（cnpm）

npm install cnpm -g  //npm是node.js软件包管理工具  -g表示全局安装

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

• 安装 vue-cli 
• 官网:https://cli.vuejs.org/guide/

cnpm install vue-cli -g  //安装的是2.x版本,新版本的安装看官网

• 测试是否安装成功

# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

npm安装的软件位置：C:Users用户AppDataRoaming pm ode_modules 

第一个 vue-cli 应用程序

创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

说明

• Project name：项目名称，默认 回车 即可
• Project description：项目描述，默认 回车 即可
• Author：项目作者，默认 回车 即可
• vue-build：选择RunTime+Compiler
• Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
• Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
• Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
• Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
• Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 No，I will handle that myself，我们手动执行

初始化并运行

cd myvue
npm install   //给项目安装依赖，会生成一个 node_modules 目录，包含项目需要依赖的所有的js
npm run dev   //运行项目

安装并运行成功后在浏览器输入：http://localhost:8080

目录结构解析

src/main.js：入口函数

import Vue from 'vue'
import App from './App'

//忽略浏览器的警告(为true,浏览器会警告你真在使用开发模式)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

package.json

//可以使用一些短的代码，代替长的代码
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

  //生产环境依赖        
  "dependencies": {
    "vue": "^2.5.2"
  },
    
  //开发环境依赖，开发环境需要依赖一些其他的工具，例如打包之类的。
  "devDependencies": {}

build/webpack.base.conf.js：用于webpack打包的配置文件

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}


module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  ..........
  }
}

vue 3.x

安装

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

创建项目

vue create hello-world