Vue 脚手架CLI 初始化项目

1 介绍

• CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。
• Vue CLI是一个官方发布vue.js项目脚手架
• 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。
• 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置

2 Vue CLI使用前提 Webpack

Vue.js官方脚手架工具就使用了webpack模板

• 对所有的资源会压缩等优化操作
• 它在开发的过程中提供了一套完整的功能，能够使得我们开发过程变得高效

Webpack全局安装

npm install webpack -g

3 Vue CLI安装

https://cli.vuejs.org/zh/guide/

3.1 安装脚手架3.x

安装Vue脚手架（全局）

# 脚手架3.x（后面拉一个模板就能用2）
npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本，如果需要按照Vue CLI2的方式初始化项目时不可以的

查看版本

vue --version

Vue CLI3.x初始化项目

vue create my-project

3.2 拉取脚手架2.x

拉取脚手架2.x官方教程

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI2初始化项目

vue init webpack my-project

4 常用命令

打包项目

npm run build

运行项目

npm run serve

6 其他常用文件

.editorconfig

# 编辑器配置
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

.eslintrc

// https://eslint.org/docs/user-guide/configuring
// eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，
// 如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告

module.exports = {

  root: true,
  parserOptions: {

    parser: 'babel-eslint'
  }
,
  env: {

    browser: true,
  }
,
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    // 'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {

    "no-unused-vars": 'off',  // 关掉语法检查
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

}

5 实战

• "vue": "^2.6.11"( package.json中 )
• @vue/cli 4.5.15( vue -V 查看 )

创建项目

vue create my-project

修改 package.json

"dependencies": {

    // 修改下面
    "vue": "^2.6.11",
}
,
"devDependencies": {

    // 修改下面
    "vue-template-compiler": "^2.6.11"
}
    

修改main.js

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

// 饿了么
import ElementUI from 'element-ui';
    
import 'element-ui/lib/theme-chalk/index.css';
    

Vue.use(ElementUI);


Vue.config.productionTip = false

new Vue({
    
  router,
  render: h =>
 h(App),
}
    ).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Test from "../views/Test";
    

Vue.use(VueRouter)

const routes = [
  //  component: () =>
 import('../views/Ajax.vue')
  {
    
    path: '/',
    name: 'Test',
    component: () =>
 import('../views/Test.vue')
  }

]

const router = new VueRouter({

  // mode: 'history',
  base: process.env.BASE_URL,
  routes
}
    )

export default router

7 第三方安装

vue-router

npm install --save vue-router

axios

npm install --save axios

饿了么

npm i element-ui -S
npm install --save element-ui

echarts

Vue引用echarts图表

npm install echarts --save

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！