Vue 脚手架CLI 初始化项目

2023-06-25 23:31:38 浏览数 (1)

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全局安装

代码语言：shell复制
npm install webpack -g

3 Vue CLI安装

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

3.1 安装脚手架3.x

安装Vue脚手架（全局）

代码语言：shell复制
# 脚手架3.x（后面拉一个模板就能用2）
npm install -g @vue/cli

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

查看版本

代码语言：shell复制
vue --version

Vue CLI3.x初始化项目

代码语言：shell复制
vue create my-project

3.2 拉取脚手架2.x

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

代码语言：shell复制
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI2初始化项目

代码语言：shell复制
vue init webpack my-project

4 常用命令

打包项目

代码语言：shell复制
npm run build

运行项目

代码语言：shell复制
npm run serve

6 其他常用文件

.editorconfig

代码语言：javascript复制
# 编辑器配置
root = true

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

.eslintrc

代码语言：javascript复制
// 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 查看 )

创建项目

代码语言：javascript复制
vue create my-project

修改 package.json

代码语言：javascript复制
"dependencies": {
    // 修改下面
    "vue": "^2.6.11",
},
"devDependencies": {
    // 修改下面
    "vue-template-compiler": "^2.6.11"
}

修改main.js

代码语言：javascript复制
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

代码语言：javascript复制
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

代码语言：text复制
npm install --save vue-router

axios

代码语言：text复制
npm install --save axios

饿了么

代码语言：text复制
npm i element-ui -S
npm install --save element-ui

echarts

Vue引用echarts图表

代码语言：text复制
npm install echarts --save
前端 vue.js

0 人点赞