前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 脚手架CLI 初始化项目

Vue 脚手架CLI 初始化项目

原创
作者头像
有勇气的牛排
发布2023-06-25 23:31:38
1560
发布2023-06-25 23:31:38
举报
文章被收录于专栏:有勇气的牛排专栏

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 介绍
  • 2 Vue CLI使用前提 Webpack
  • 3 Vue CLI安装
    • 3.1 安装脚手架3.x
      • 3.2 拉取脚手架2.x
      • 4 常用命令
      • 6 其他常用文件
      • 5 实战
      • 7 第三方安装
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档