Vue 脚手架CLI 初始化项目

有勇气的牛排 1230 前端 2021-11-22 00:11:54

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

<h2><a id="1__0"></a>1 介绍</h2> <ul> <li> CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 </li> <li> Vue CLI是一个官方发布vue.js项目脚手架 </li> <li> 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。 </li> <li> 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 </li> </ul> <h2><a id="2_Vue_CLI_Webpack_10"></a>2 Vue CLI使用前提 Webpack</h2> Vue.js官方脚手架工具就使用了webpack模板 <ul> <li> 对所有的资源会压缩等优化操作 </li> <li> 它在开发的过程中提供了一套完整的功能，能够使得我们开发过程变得高效 </li> </ul> Webpack全局安装 <pre><div class="hljs"><code class="lang-shell">npm install webpack -g </code></div></pre> <h2><a id="3_Vue_CLI_24"></a>3 Vue CLI安装</h2> https://cli.vuejs.org/zh/guide/ <h3><a id="31_3x_27"></a>3.1 安装脚手架3.x</h3> 安装Vue脚手架（全局） <pre><div class="hljs"><code class="lang-shell"># 脚手架3.x（后面拉一个模板就能用2） npm install -g @vue/cli </code></div></pre> 注意：上面安装的是Vue CLI3的版本，如果需要按照Vue CLI2的方式初始化项目时不可以的 查看版本 <pre><div class="hljs"><code class="lang-shell">vue --version </code></div></pre> Vue CLI3.x初始化项目 <pre><div class="hljs"><code class="lang-shell">vue create my-project </code></div></pre> <h3><a id="32_2x_49"></a>3.2 拉取脚手架2.x</h3> <a href="https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC" target="_blank">拉取脚手架2.x官方教程</a> <pre><div class="hljs"><code class="lang-shell">npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同 vue init webpack my-project </code></div></pre> Vue CLI2初始化项目 <pre><div class="hljs"><code class="lang-shell">vue init webpack my-project </code></div></pre> <h2><a id="4__64"></a>4 常用命令</h2> 打包项目 <pre><div class="hljs"><code class="lang-shell">npm run build </code></div></pre> 运行项目 <pre><div class="hljs"><code class="lang-shell">npm run serve </code></div></pre> <h2><a id="6__79"></a>6 其他常用文件</h2> <code>.editorconfig</code> <pre><div class="hljs"><code class="lang-javascript"># 编辑器配置 root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true </code></div></pre> <code>.eslintrc</code> <pre><div class="hljs"><code class="lang-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' } } </code></div></pre> <h2><a id="5__132"></a>5 实战</h2> <ul> <li><code>"vue": "^2.6.11"</code>( package.json中 )</li> <li><code>@vue/cli 4.5.15</code>( vue -V 查看 )</li> </ul> 创建项目 <pre><div class="hljs"><code class="lang-javascript">vue create my-project </code></div></pre> 修改 <code>package.json</code> <pre><div class="hljs"><code class="lang-javascript">"dependencies": { // 修改下面 "vue": "^2.6.11", }, "devDependencies": { // 修改下面 "vue-template-compiler": "^2.6.11" } </code></div></pre> 修改<code>main.js</code> <pre><div class="hljs"><code class="lang-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') </code></div></pre> <code>router/index.js</code> <pre><div class="hljs"><code class="lang-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 </code></div></pre> <h2><a id="7__200"></a>7 第三方安装</h2> <code>vue-router</code> <pre><code class="lang-powershell">npm install --save vue-router </code></pre> <code>axios</code> <pre><code class="lang-powershell">npm install --save axios </code></pre> <code>饿了么</code> <pre><code class="lang-powershell">npm i element-ui -S npm install --save element-ui </code></pre> <code>echarts</code> <a href="https://blog.csdn.net/zx77588023/article/details/122803718" target="_blank">Vue引用echarts图表</a> <pre><code class="lang-powershell">npm install echarts --save </code></pre>