vue-cli3.x创建及运行项目
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。如果你已经全局安装了旧版本的
vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。重新安装vue-cli,将是最新的vue-cli版本
npm install -g @vue/cli
- 安装完后使用命令:
vue --version
查看安装的版本号,以及是否安装成功
- 创建项目:
vue create hello-world
- 接下来,是在知乎上学习到的知识,引用知乎的图
default: 默认配置,只有bable和eslint
Manually select features: 手动配置
Babel:将ES6编译成ES5
TypeScript:JS超集,主要是类型检查
Progressive Web App(PWA)Support:渐进式WEB应用支持
Router:路由
Vuex:状态管理
Linter/ Formatter:代码检查工具
CSS Pre-processors:css预编译 (稍后会对这里进行配置)
Unit Testing:单元测试,开发过程中前端对代码进行自运行测试
E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
- 使用什么css预编译器:
- 代码检查工具:
tslint: typescript格式验证工具(如果前面选择了TypeScript会有这一项)
eslint w...: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)
eslint + A...: 不严谨模式;
eslint + S...: 正常模式
eslint + P...: 严格模式;
- 代码检查方式:(我都选了)
- 所有的依赖目录的配置放置的位置(一般都是package.json)
- 在这里,项目的创建就算是完成了。
- 但是,vue-cli3与2的版本有很大区别,其中之前的build目录取消,也就没有了我们之前用的配置文件,那么我们需要在vue-cli3项目手动添加vue.config.js(在根目录下)
- 配置vue.config.js:
// vue.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
// baseUrl从vue cli 3.3起已经弃用了,用publicPath来代替
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署应用包时的基本URL(这里可以看一下官方说明)
outputDir: 'dist', // 打包时生成的生产环境构建稳健的目录
assetsDir: 'static', // 放置生成的静态资源的目录
filenameHashing: true,
lintOnSave: true, // eslint-loader会将lint错误输出为编译警告
productionSourceMap: false, // 如果你不需要生产环境的source map,可以将其设置为false,以加速生产环境的构建
configureWebpack: {
// 简单/基础配置,比如引入一个新插件
plugins: []
},
chainWebpack: config => {
// 链式配置
},
css: {
// css预设器配置项
loaderOptions: {
css: { },
postcss: { }
}
},
devServer: {
open: true,
host: '127.0.0.1',
port: ,
https: false,
hotOnly: false,
proxy: null,
// proxy: {
// '/api': {
// target: '<url>',
// ws: true,
// changOrigin: true
// }
// },
before: app => {}
},
// 第三方插件配置
pluginOptions: {}
} - 项目的目录的参考:
### 项目目录结构
├── public // 静态资源
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── models // 实体类
│ ├── router // 路由及路由配置相关
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── pages // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
├── tests // jest测试
├── .eslintrc.js // eslint配置
└── package.json - Vue CLI >= 3 和旧版使用了相同的
vue
命令,所以 Vue CLI 2 (vue-cli
) 被覆盖了。如果你仍然需要使用旧版本的vue init
功能,你可以全局安装一个桥接工具:npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@.x` 相同
vue init webpack my-project - 接下来就是运行项目了:
cd hellow-world
npm run serve
vue-cli3.x创建及运行项目的更多相关文章
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- 用Eclipse+ADT创建可运行项目,创建lib项目,引用一个lib项目
Managing Projects from Eclipse with ADT In this document Creating an Android Project 创建可运行项目 Settin ...
- 当Vue可视化工具创建不了项目时的解决办法!
当Vue可视化工具创建不了项目时的解决办法! 当你尝试用可视化工具创建一个Vue的项目的时候,报错, 出现什么indexOf什么什么的错误! 我的解决办法是把可视化工具删除掉,重新下载! 如果你是 n ...
- VUE CLI3.X 创建项目
Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...
- 第三部分 IDEA创建并运行项目
可以创建一个maven,几行代码就解决了导入依赖,但是我的电脑不知道哪里出现了问题,IDEA重装,jdk重装,maven重装,都无法解决问题,找了3天,还是没有解决问题.最后只能采用手动导入包方法.看 ...
- vue中npm run dev运行项目自动打开浏览器
npm run dev运行项目自动打开浏览器设置自动打开浏览器 // 各种设备设置信息 host: 'localhost', //主机名 port: 8080, // 端口号(默认 ...
- ABP实践(1)-通过官方模板创建ASP.NET Core 2.x版本+vue.js单页面模板-启动运行项目
1,打开ABP官网下载模板页面 2,根据下图选择对应的选项及输入项目名 注:上图验证码下方的选择框打钩表示下载最新稳定版,不打钩表示下载最新版本(有可能是预览版) 3,解压下载的压缩包 解压之后是个a ...
- 使用Pycharm创建一个Django项目
在使用python写脚本一段时间后,想尝试使用Django来编写一个python项目,现做以下记录备忘: 1.创建项目 如果本地没有安装与所选python版本对应Django版本,pycharm会自动 ...
- Pycharm创建一个Django项目
1.创建项目 如果本地没有安装与所选python版本对应Django版本,pycharm会自动下载相应的版本: 创建后运行项目,默认页面为http://127.0.0.1:8000/,打开后: 出现上 ...
随机推荐
- Clock Crossing Adapter传输效率分析 (Latency增加,传输效率降低)
原创By DeeZeng [ Intel FPGA笔记 ] 在用Nios II测试 DDR3时候发现一个现象 (测试为:写全片,读全片+比对) 用单独的PLL产生时钟(200MHz)驱动 Nios I ...
- isMemberOfClass、isKindOfClass原理分析
isMemberOfClass - 调用者必须是传入的类的实例对象才返回YES- 判断调用者是否是传入对象的实例,别弄反了,如 [s1 isMemberOfClass:p1] ,意思是s1是否是p1的 ...
- zmnXAglTcg
#include <map>#include <cmath>#include <stack>#include <queue>#include <l ...
- S2:面向对象
面向对象七大设计原则 1. 开闭原则 2. 里氏替换原则 3. 单一职责原则 4. 接口隔离原则 5. 依赖倒置原则 6. 迪米特原则 7.组合/聚合复用原则 原则一:(SRP:Single resp ...
- 前端本地proxy跨域代理配置
等了好久的接口,总算拿到了,结果却发现用本地localhost:9712去请求接口的时候,出现了跨域错误,而这个时候我们就需要进行下跨域配置了. 首先,找到项目中名为webpack.config.js ...
- Powered by .NET Core 进展:用 docker-compose 验证高并发问题嫌疑犯 docker swarm
相关博文: [故障公告]发布 .NET Core 版博客站点引起大量 500 错误 [网站公告].NET Core 版博客站点第二次发布尝试 暴风雨中的 online : .NET Core 版博客站 ...
- strstr函数使用中的一个错误解决
最近使用ESP8266的时候,联网的过程中需要使用strstr函数来读取串口发来的某些重要信息, 使用strstr函数发现某些时候能够正常返回需要寻找的字符串的指针,有些时候找不到,后来发现原来是这样 ...
- [转载]ActiveMQ实现负载均衡+高可用部署方案
转载于 http://www.open-open.com/lib/view/open1400126457817.html 一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的, ...
- canvas 鼠标位置缩放图形
最近再做 webcad , 需要在 canvas 上对图形进行缩放,主要分为以下几个步骤: 1.找到当前光标所在位置,确定其在相对 canvas 坐标系的坐标 绑定鼠标滚轮事件,假定每次缩放比例 0 ...
- 网页如何设置favicon.ico
1.首先制作ico图,并命名favicon.ico 2.将文件放在项目的根目录下