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 filesplugins: ['vue'],// add your custom rules hererules: {"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 = falsenew 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

原文：https://www.920vip.net/article/162

Vue 脚手架CLI 初始化项目相关推荐

7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析首先从package.json中的脚本配置来看,np ...
Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
Vue脚手架安装及项目搭建（mac版)
前提:电脑上已经安装好了npm vue脚手架全局安装终端命令 $ sudo npm install -g vue-cli 安装完成之后检测 $ vue -V 如果终端输出vue的版本号,那么脚手架就安 ...
Vue脚手架创建TS项目
What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...
vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...
Vue脚手架工程 - 新建项目时注意事项、与配置工程时经验总结
文章目录新建脚手架工程配置vue.config.js文件启动项目时自启动浏览器编辑演示关闭eslint检验编辑演示 less语法爆红组件名异常解决方案安装vue-router 别忘了 ...
在手机上查看和测试vue脚手架搭建的项目
① 打开cmd输入命令ipconfig,获取到本机的IP地址: ② 得到IPV4值,然后用该值替换localhost: ③ 找到vue项目的config文件夹下的index.js文件,打开后将h ...