安装node环境
主要是安装npm,此处省略。
Vue-Cli安装
如果安装过vue2.0先执行:
npm uninstall vue-cli -g
如果没有安装过vue2.0,执行:
npm install -g @vue/cli
npm install -g @vue/cli@next
验证:
vue -V
项目创建
# /opt目录下进行演示
vue create projectName
# 1.命令行提示输入"y",然后进行回车
# 2.此时提示用户以什么模板方式进行安装
# Default([Vue2] babel, eslint) 默认的预设设置,创建vue2.0项目,包含babel和eslint的支持
# Default(Vue3 Preview) 默认预设,快速创建vue3.0的项目,包含babel和eslint的支持
# Manually select features:手动进行项目设置,自行进行选择,使用上下箭头和空格键进行反选或者选中
# 下面对里面的配置项进行重点记录:
# Babel:源码进行编码 ES6=》ES5
# ProgressiveWebAppSupport 使用渐进式网页应用(PWA)
# CSS Pre-processors:使用css预处理器,如Less、Sass等
# Linter/Formatter:使用代码风格检查和格式化
# UnitTesting:使用单元测试
# E2E Testing:黑盒测试的一种
# 3.选择项目类型,提供有vue2.x和vue3.x(*)
# 4.是否使用history路由模式,如果启用,那么可能访问的时候出现浏览器的空白页面(n)
# 5.选择CSS预处理器:Less(扩充了CSS)、Sacc/SCSS(*)(采用Ruby编写的,最成熟的Css处理器)、Stylus(类似python,没有规范维护较为困难)
# 6.选择代码格式化监测工具:
# a.EsLint with errors prevention only(*) 只提示错误提醒
# b.ESLint+Airbnb config:ESLint Airbnb标准
# c.ESLint+Standard config:ESLint Standard标准(*)
# d.ESLint+Prettier:ESLint(代码质量检测)+Prettier(代码格式化工具)
# 7.选择代码检查方式:
# a.Lint on save(*):保存时检查
# b.Linet and fix on commit(requires Git):提交时检查
# 8.设置Babel、PostCSS、ESLint等配置文件如何存放:
# a.In dedicated config files: 放在单独的配置文件中
# b.In package.json:放到package.json中(*)
# 9.设置是否保存当前配置:y/n(n)
# 10.等待配置完成并生效
# 启动项目:
npm run serve
# 访问测试:http://ip:port/
项目目录说明
node_modules
:项目依赖包public
:公共资源目录,存放需要访问的图片文件和HTML文件,打包的时候将该文件夹下的文件直接复制到dist中
-index.html
:主页文件favicon.ico
: 图标文件
src
:核心文件目录asserts
:静态资源目录components
:组件文件夹router
:路由配置目录store
:容器目录,包含应用中大部分的状态views
:视图组件目录
App.vue
主组件,也是页面入口文件,负责构建定义和页面组件归集main.js
:入口JavaScript文件.browserslistrc
:配置使用css兼容性插件的使用范围.eslintrc.js
:配置使用ESLint.gitignore
:配置gitignore的文件或者文件夹babel.config.js
:使用一些预设package.json
:项目描述以及依赖package-lock.json
:版本管理使用的文件README.md
:项目描述
开发工具
-
JetBrains WebStorm
- 收费
-
Visual Studio Code
- 开源免费,推荐使用
- 简称
VS Code
- 下载地址
- 安装插件:
- 汉化插件
Chinese(Simplified) Language
- 前端常用插件:
Auto Close Tag
:自动补全HTML表亲啊Auto Rename Tag
:自动重命名成对的HTML标记HTML CSS Support
:语法提示HTML Snippets
:HTML代码片段,注意不需要键入尖括号JavaScript(ES6) code snippets
:ES6语法只能提示language-stylus
:语法提示Path Autocomplete
:自动提示文件路径,支持各种快速引入文件VS Color Picker
:颜色自动提示Vue VS Code Snippets
:HTML中的提示和代码补全Vetur
:VSCode官方指定的vue插件,包含语法高亮、智能提示、错误提示、emmet、格式化、自动补全和debugger等实用功能ESLint
:规范JavaScript代码书写规则Vetur
:语法高亮、智能感知等Debugger for Chrome
:通过VSCode调试在GoogleChrome中运行的JavaScript代码Beautify
:在代码文件中右击,在弹出的快捷键中选择一键格式化代码Bracket Pair Colorizer
:该插件可以把成对的括号做颜色区分Code Spell Checker
:拼写检查程序
- 汉化插件
以上是此次内容的总结,后续更新。