1、Vue CLI脚手架工具
1、先卸载旧版的的vue-cli
npm uninstall vue-cli –g
2、npm方式全局安装@vue/cli脚手架
npm install @vue/cli@3.10 –g
vue –V 查看版本,显示版本号则安装成功
3、使用vue create命令创建项目
vue create hello-vue(项目名)
=>重新执行vue create hello-vue后,交互符界面提示用户选取一个preset(预设),default是默认项,包含基本的babel+eslint设置,适合快速创建一个新项目。Manually select features表示手动配置,提供可供选择的npm包,更适合面向生产的项目,在实际工作中推荐使用> default (babel, eslint)
=>选择需要的插件
按空格键可以选择某一项,a键全选,i键反选。下面对这些选项的作用进行解释,具体如下。
Babel:Babel配置(Babel是一种JavaScript 语法的编译器)
TypeScript:一种编程语言
Progressive Web App (PWA) Support:渐进式Web应用支持
Router:vue-router
Vuex:Vue状态管理模式
CSS Pre-processors:CSS预处理器
Linter / Formatter:代码风格检查和格式化
Unit Testing:单元测试
E2E Testing:端到端(end-to-end)测试
=>执行项目
cd hello-vue
npm run serve
4、GUI创建项目
=>创建目录
mkdir vue-ui
=>执行cd vue-ui命令进入目录中,执行如下命令来创建项目:
vue ui
=>按界面步骤操作即可
2、插件
1、CLI插件
vue add (插件) --- 安装插件
2、CLI服务
在项目目录下使用npx命令可以运行vue-cli-service
npx vue-cli-service
显示:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server 启动服务
build build for production 生成用于生产环境的包
inspect inspect internal webpack config 审查webpack配置
lint lint and fix source files lint并修复源文件
运行帮助信息
npx vue-cli-service help serve
Usage: vue-cli-service serve [options]
Options:
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将URL复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)
build用法即帮助信息
Usage: vue-cli-service build [options] [entry|pattern]
Options:
--mode 指定环境模式 (默认值:production)
--dest 指定输出目录 (默认值:dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值:app)
--name 库或Web Components模式下的名字
--no-clean 在构建项目之前不清除目标目录
--report 生成report.html以帮助分析包内容
--report-json 生成report.json以帮助分析包内容
--watch 监听文件变化
3、 配置文件
vue-cli3引入了全局配置文件的功能,如果项目的根目录中存在vue.config.js文件,就会被@vue/cli-service模块自动加载。因此,vue.config.js是一个可选的配置文件
(直接创建文件vue-config.js,导入需要配置的文件进行配置即可)
例:
4、配置多页应用
在创建好的hello-vue项目中,新建vue.config.js
文件
在src目录下创建页面目录,把assets、views、App.vue、main.js、router移动到index目录中
assets:存放图片资源
views:存放About.vue、Home.vue
App.vue:页面渲染组件
main.js:页面主入口文件
router:存放路由文件
修改src\index\main.js文件,将store的路径改为上级目录
import store from '../store'
之后在创建一个页面目录,放入一样的目录文件夹,在浏览器打开不同的网址即可以打开不同的页面内容
4、环境变量和模式
1、环境变量
不同环境下变量的不同值
CLI 3构建的项目目录中,移除了config和build这两个配置文件,并在项目根目录中定义了4个文件,用来配置环境变量,具体如下。
.env:将在所有的环境中被载入
.env.local:将在所有的环境中被载入,只会在本地生效,会被git忽略
.env.[mode]:只在指定的模式下被载入。如.env.development用来配置开发环境的配置。关于模式具体会在下一节中讲解
.env.[mode].local:只在指定的模式下被载入,与.env.[mode]的区别是,只会在本地生效,会被git忽略
2、模式 (即环境)
默认情况下,一个Vue CLI项目有3种模式,具体如下。
development:用于vue-cli-service serve,即开发环境使用
production:用于vue-cli-service build和vue-cli-service test:e2e,即正式环境使用
test:用于vue-cli-service test:unit使用
自定义模式
1、打开package.json文件,找到scripts部分,通过“–mode”选项来修改模式。
"stage": "vue-cli-service build --mode stage" // 新增stage模式
2、然后在项目根目录下创建.env.stage文件
3、然后在vue.config.js文件使用环境变量,指定输出目录为环境变量配置的stage目录
outputDir: process.env.outputDir
4、保存上述代码,执行npm run stage命令,就可以看到在项目根目录下生成了stage目录
3、静态资源管理
静态资源的处理不仅和public目录有关,也和引入方式有关。根据引入路径的不同,有如下处理规则。
如果URL是绝对路径,如/images/logo.png,会被保持不变
如果URL以.前缀开头,会被认为是相对模块请求,根据文档目录结构进行解析
如果URL以~前缀开头,其后的任何内容会被认为是模块请求,表示可以引用node_modules里的资源,如<img src="~some-npm-package/foo.png">
如果URL以@开始,会被认为是模块请求,因为Vue CLI的默认别名@表示“/src”(仅作用于模板中)