vue-cli 3 脚手架搭建(create)
地址:https://cli.vuejs.org/zh/guide/
安装步骤:
提示:node 版本要 8.9+
- 两种方式:
(1) npm install -g @vue/cli
(2) yarn global add @vue/cli
安装完成之后检查 vue --version/ vue -V 检查版本 - npm install -g @vue/cli-service-global
- 创建项目
vue create hello-world // 项目名称
终端:(上下键选择)
default (bable,eslint) // 默认
Manually select features // 手动 **选择手动创建项目
回车
终端:(上下键移动键,空格键是否选中)
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
() Babel
( ) TypeScript // 语法
( ) Progressive Web App (PWA) Support // PWA
() Router // 路由
(* ) Vuex // store
( ) CSS Pre-processors // 预编译
() Linter / Formatter // 格式化代码
( ) Unit Testing
( ) E2E Testing
//提示: Babel, Router, Vuex, CSS Pre-processors, Linter 选中
回车
终端:
Vue CLI v3.0.5
? Please pick a preset: Manually select features // 手动创建项目
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
//在生产中需要适当的服务器设置用于索引回退
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
// css 预编译
? Pick a linter / formatter config: Prettier // (ESLint + Prettier)格式化程序配置
? Pick additional lint features: Lint on save // 保存即检查格式
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
// 其他配置数据单独存放再一个配置文件内
? Save this as a preset for future projects? Yes
// 是否保存这个项目的配置
? Save preset as: SaveVue3.0
// 是的话 项目命名假设为:SaveVue3.0
命令:
- 使用图形化界面
vue ui
图形化数据 - yarn serve 启动项目
- yarn build 打包项目
(4,5,6 不可同时执行)
- // vscode 代码检测设置
文件 ~ 首选项 ~ 设置 ~ 工作区
{
"editor.formatOnSave": false,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},
"html",
"vue"
]
}
vscode 加载插件 ESLint // 代码检测工具
vue-cli 3 脚手架搭建(create)的更多相关文章
- vue环境配置脚手架搭建,生命周期,钩子
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- 【vue】---- 新版脚手架搭建项目流程详解
一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...
- vue简单的脚手架搭建项目
第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- vue cli创建脚手架
1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js 和淘宝镜像 3. ...
- 让我们用Vue cli全家桶搭建项目
一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...
- vue二、脚手架搭建
1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...
- Vue -cli 入门 --项目搭建(一)
一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
随机推荐
- SAP 登录Fiori的user和登录WEB UI的business role之间的关系。
SAP 登录FIORI的user 会被assign 一些控制前端app显示的business role(是一些PFCG role的集合),该business role和登录web ui选择的S4C_S ...
- [CF1303C] Perfect Keyboard - DFS
Solution 根据原字符串建图,每个字符是一个点,相邻则连边 然后从每一个度数为 \(1\) 的点开始爆搜连通块,合法情况下应该是一条链 #include <bits/stdc++.h> ...
- 《图解HTTP》笔记
web网络基础 概述 Web是建立在HTTP(超文本传输协议)上通信的 通常使用的网络(包括互联网)是在TCP/IP基础上运作的,HTTP属于它的内部子集 TCP/IP协议 协议族 计算机与网络设备要 ...
- 858. Prim算法求最小生成树(模板)
给定一个n个点m条边的无向图,图中可能存在重边和自环,边权可能为负数. 求最小生成树的树边权重之和,如果最小生成树不存在则输出impossible. 给定一张边带权的无向图G=(V, E),其中V表示 ...
- java中堆栈的一些理解备忘
堆:用来存放对象的信息,同一个类存放各自的成员变量,共享对象的方法. 栈:用来保存局部变量的值,包括基本数据类型的值.保存类的实例(堆区对象的引用).保存加载方法的帧. 常量池:包含了一个类型所有的对 ...
- unrecognized import path "golang.org/x/*"的解决办法
由于国内网络原因,因此访问https://golang.org/网站会被限制.所以在go get下载其他第三方包的时候,如果这个第三方包又引用了https://golang.org/x/下的包,通常会 ...
- 机器学习作业(四)神经网络参数的拟合——Python(numpy)实现
题目下载[传送门] 题目简述:识别图片中的数字,训练该模型,求参数θ. 出现了一个问题:虽然训练的模型能够有很好的预测准确率,但是使用minimize函数时候始终无法成功,无论设计的迭代次数有多大,如 ...
- SSM项目集成Lucene+IKAnalyzer在Junit单元测试中执行异常
个人博客 地址:http://www.wenhaofan.com/article/20181108132519 问题描述 在项目运行以及main方法中能够正常运行,但是使用junit单元测试时却报如下 ...
- python3练习100题——033
链接:http://www.runoob.com/python/python-exercise-example33.html 题目:按逗号分隔列表. l=[1,2,3,4] k=1 for i in ...
- Atom 基础使用
当你安装好了 Atom 之后,让我们来认识一下它吧. 当你第一次打开 Atom 的时候,你会看到这样的一个窗口: 这是 Atom 的欢迎屏幕(welcome screen),它展示了一些不错的建议 ...