1. 脚手架:(3)
如何:
1. 安装脚手架的工具命令:
npm i -g @vue/cli 电脑安装完命令后 : 直接创建 vue create 文件夹名字
2. 用命令反复创建脚手架:
cd 要保存项目的文件夹完整路径
比如: cd C:xampphtdocsdd6_VUEday04
用vue命令工具,创建一个项目的脚手架代码
1. Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installatio
n? (Y/n) n
2. ? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
3. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel 将脚手架中浏览器不认识的一切东西翻译为浏览器认识的。 必选 相当于 翻译官
( ) TypeScript 更严格的javascript,ng框架使用
( ) Progressive Web App (PWA) Support
(*) Router 必选
(* ) Vuex 为下一阶段做登录/购物车做准备
( ) CSS Pre-processors
( ) Linter / Formatter 代码格式检查工具,要求过于变态
( ) Unit Testing
( ) E2E Testing
4. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
history模式可去掉地址栏中的#
但需要服务端同步配置重定向,才能让客户端支持
所以,学习时,不用启用history
5. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json //在package.json一个文件中,保存所有配置信息
6. Save this as a preset for future projects? (y/N) N
是否保存以上配置步骤的选项为今后所有项目的默认配置。不保存。因为不同项目需要的组件可能不一样。
3. 运行脚手架项目: npm run serve
临时启动一个简易版的调试服务器来宿主html,css,js
将脚手架中浏览器不认识的代码编译为浏览器认识的代码
在默认: http://localhost:8080/
打开浏览器在地址栏中: http://localhost:8080/
问题: npm run serve仅临时编译代码,并运行,不产生最终编译结果。就不能部署上线。
解决: npm run build
将脚手架中浏览器不认识的代码编译为浏览器认识的代码
将编译后的代码压缩为统一的文件。
将来: 往新浪云上拷贝时,只拷贝dist/中的内容即可。
脚手架 2.0
vue脚手架安装步骤
1全局安装 npm i -g vue-cli (vue--version 看版本号)
2通过vue命令初始化一个带有webpack模板的项目结构: vue init webpack my-preject
? Project name v-first 项目名(直接回车)
? Project description A Vue.js project 项目描述(直接回车)
? Author zhouzhonghao <1223455394@qq.com> 作则,默认显示git账号
? Vue build
> Runtime + Compiler: recommended for most users(选这个吧) 推荐给大部分用户使用
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
Install vue-router (y/n ) 是否安装路由 y
Use ESLint to lint your code? (y/n) 是否启用严格校验模式
Standard (https://github.com/standard/standard) (选这个可以)
Airbnb (https://github.com/airbnb/javascript) (这个也可以,更加严格一些)
none (configure it yourself) (自己去配置)
Set up unit tests (Y/n) 选 N
Setup e2e tests with Nightwatch? (Y/n) 选 N
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 是否启用npm去安装创建你的project并且安装依赖项
> Yes, use NPM 选 这个
Yes, use Yarn
No, I will handle that myself
安装成功
如何关闭ESLint代码风格校验
-在 config/index.js 中将 useEslint 设置为false