Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue 脚手架CLI 初始化项目

Vue 脚手架CLI 初始化项目

原创
作者头像
有勇气的牛排
发布于 2023-06-25 15:31:38
发布于 2023-06-25 15:31:38
17500
代码可运行
举报
运行总次数:0
代码可运行

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
AI代码解释
复制
npm install webpack -g

3 Vue CLI安装

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

3.1 安装脚手架3.x

安装Vue脚手架(全局)

代码语言:shell
AI代码解释
复制
# 脚手架3.x(后面拉一个模板就能用2)
npm install -g @vue/cli

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

查看版本

代码语言:shell
AI代码解释
复制
vue --version

Vue CLI3.x初始化项目

代码语言:shell
AI代码解释
复制
vue create my-project

3.2 拉取脚手架2.x

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

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

Vue CLI2初始化项目

代码语言:shell
AI代码解释
复制
vue init webpack my-project

4 常用命令

打包项目

代码语言:shell
AI代码解释
复制
npm run build

运行项目

代码语言:shell
AI代码解释
复制
npm run serve

6 其他常用文件

.editorconfig

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 编辑器配置
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
代码运行次数:0
运行
AI代码解释
复制
// 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
代码运行次数:0
运行
AI代码解释
复制
vue create my-project

修改 package.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"dependencies": {
    // 修改下面
    "vue": "^2.6.11",
},
"devDependencies": {
    // 修改下面
    "vue-template-compiler": "^2.6.11"
}

修改main.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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
AI代码解释
复制
npm install --save vue-router

axios

代码语言:text
AI代码解释
复制
npm install --save axios

饿了么

代码语言:text
AI代码解释
复制
npm i element-ui -S
npm install --save element-ui

echarts

Vue引用echarts图表

代码语言:text
AI代码解释
复制
npm install echarts --save

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
qiankun 实战(一)
前两天用了一下微前端框架 icestark, 在实际架构搭建过程中发现中发现在 Vue 主应用子应用之间切换 tag (tag 分别主应用和子应用的页面)页签时会有子应用数据状态无法保存的情况,搜索了一波解决方案后发现,icestark 中 React 应用实现了对数据状态的缓存,Vue 里面没有这个实现。
草帽lufei
2022/07/29
7940
qiankun 实战(一)
十九.使用Vue脚手架
Vue脚手架可以快速生成Vue项目基础的架构。 1. 安装3.x版本的Vue脚手架: npm install -g @vue/cli 2. 基于3.x版本的脚手架创建Vue项目: 1. 使用命令创建Vue项目 命令:vue create my-project 选择Manually select features(选择特性以创建项目) 勾选特性可以用空格进行勾选。 是否选用历史模式的路由:n ESLint选择:ESLint + Standard config 何时进行ESLint语法校验:Lint on save babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置) 是否保存为模板:n 使用哪个工具安装包:npm 2. 基于ui界面创建Vue项目 命令:vue ui 在自动打开的创建项目网页中配置项目信息。 3. 基于2.x的旧模板,创建Vue项目 npm install -g @vue/cli-init vue init webpack my-project
Yuyy
2022/06/28
3740
搭建vue2.0脚手架
1. 全局安装 vue-cli   npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目   vue init webpack my-project 3. 安装依赖   cd my-project   npm install (换源安装: npm install --registry https://registry.npm.taobao.org )
javascript艺术
2021/05/28
9930
搭建vue2.0脚手架
Vue笔记(9) 脚手架
之前我们在脚手架2运行时是用的npm run dev,现在脚手架3用的是npm run serve,可以在package.json里面找到
y191024
2022/09/20
2600
Vue笔记(9) 脚手架
Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V
ProsperLee
2018/11/19
7610
08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
https://element.eleme.cn/#/zh-CN/component/quickstart
iginkgo18
2020/11/24
1.6K0
08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue新手必学:Vue的使用和Vue脚手架详解
Vue.js是一套用于构建用户界面的渐进式JavaScript框架,被广泛用于单页面应用程序的开发。对于初学者来说,Vue的简洁易用和灵活性使其成为学习前端开发的理想选择。本文将介绍Vue的基本使用方法,并深入了解Vue脚手架的搭建和使用。
IT_陈寒
2023/12/14
7510
Vue新手必学:Vue的使用和Vue脚手架详解
17、webpack从0到1-构建vue项目
讲下webpack中的对于vue配置,其实vue官方就提供了一套模板vue-webpack-template,我们学习学习,然后基于当前自己的项目来配置下。 git仓库:webpack-demo 1、处理vue 对于.vue这种文件,webpack肯定是不认识的,所以我们需要相应的loader来处理它,通过查阅文档我们发现需要安装这两个东西: $ npm install vue-loader vue-template-compiler --save-dev 然后安装文档上面的教程,照猫画虎搞一下。这
Ewall
2020/03/25
5870
Vite2.0搭建Vue3.0项目应用实战
最近Vite2.0很火热,说是要替代webpack作为下一代前端构建工具。上个周末搬完房子仔细研究了一下,照着我们目前的项目环境,尝试搭建了一套基础环境,简单了解了Vite2.0的配置,以及各种库的集成。这里对Vite2.0不做过多的介绍,主要优点就是快,快,快。
江一铭
2022/06/16
4230
Vite2.0搭建Vue3.0项目应用实战
08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装、全局安装、本地
老马
2018/01/05
1.4K0
vue
main.js 程序的入口, 里边是导入的模块,例如vue模块,以及自己写的模块等
Dean0731
2021/03/05
3320
vue
​(非软文)Webpack从入门到实战搭建Vue脚手架(一万字总结)
安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
Vam的金豆之路
2021/12/01
1.3K0
vue脚手架
学习vue之初就接触到了脚手架,去年的时候还是使用vue cli进行构建,今年基本都用vite了,官方也都推荐这种方式,那就赶快用起来,快速开发属于自己的vue应用。
希里安
2023/10/30
3170
vue脚手架
Vue2.0搭建脚手架流程
Vue.js是一套构建用户界面的渐进式框架。 Vue 只关注视图层,采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
小周sir
2019/09/23
7970
Vue2.0搭建脚手架流程
创建vue项目的几种方式
最近一段时间在学习vuejs和element-ui、iview-ui这些前端知识,在创建vuejs项目时发现有几种不同的方法:
ccf19881030
2020/04/10
3.3K0
vue[0x01] -- Hello World
如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早期的vue中,还是以脚本文件的形式通过script标签引入vue,而稍微懂点编程的应该也都接触过像jQuery之类的类库,可以说你是天然会,创建一个实例也很好理解,你会发现印象比较深刻的例子就是我在一个文本框输入数据楼下的显示文本也跟着变化了,数据与视图巧妙结合。前后端通过JSON进行数据交互,Ajax技术进行通信,硬憋一下也还行。那么,为啥又难了呢?前端技术发展太快了,前阵子在v站上看到一个帖说后端看不懂前端(这个笔者在目前所在公司真的有很深很深很深很深深深深的感受,也让我明白了做职业规划的重要性),其实,你找个前端过来也不一定能完全看得懂我个人认为,因为兴起的技术太特么多了,两只手怎么学的过来,若没有惊人的毅力。而且版本更新太快了,打开一个现代版的前端项目,配置文件就够你喝一壶,当然可能还有一些政治因素限制,僧多肉少的局面对源码也有一定的要求,导致难度曲线一下子就上去了,所以说比较难吧。生活不止眼前的苟且,还有你到不了的远方。加油吧,一点一点成长起来,同志们。
江涛学编程
2020/06/19
5490
vue[0x01] -- Hello World
利用官方的vue-cli脚手架来搭建Vue集成开发环境
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/linzhiqiang0316/article/details/79176641
林老师带你学编程
2019/05/26
5460
手把手教你写一个脚手架
最近在学习 vue-cli[1] 的源码,获益良多。为了让自己理解得更加深刻,我决定模仿它造一个轮子,争取尽可能多的实现原有的功能。
用户4456933
2021/07/12
1.8K0
手把手教你写一个脚手架
Vue开发环境搭建
nodejs中集成了npm 因此需要安装nodejs,官方地址是https://nodejs.org/en/ 查看当前npm版本
羊羽shine
2019/06/15
1.1K0
开箱即用的 Vue Webpack 脚手架模版
于 2017 年初,有在 Github 建立并维护一个项目:Vue Boilerplate Template,以成就一款开箱即用 Vue + Webpack 的脚手架模版;其目标与宗旨是:根据以往经验提供一些参考,对于如何构建中大型 Vue 项目。这蛮久以来,有坚持维护更新,各项主要依赖库,基本都保持着同步升级;记载这篇文章,即是对关于它的设计做下更全面的阐述,以起到项目 Wiki 的作用。 关于此 Vue、Webpack 脚手架模版 这是一个用以开发 Web 单页应用的脚手架项目;谨以 Vue 为开发
晚晴幽草轩轩主
2018/07/04
1.1K0
相关推荐
qiankun 实战(一)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验