一、前言
先前由于项目的需求，临急临忙学了vue，东学一点西学一下，就像三脚猫一样，缺乏系统的整理和沉淀，现在计划抽空整理一下，方便后续知识的回顾，也方便后续新人的入门。废话少说，现在先从开发环境准备开始吧。
二、安装 Nodejs
1、设置环境变量
请根据自己的实际安装目录进行设置：
NODE_BASE "D:\DevTools\Nodejs"
NODE_HOME "D:\DevTools\Nodejs\node-v10.14.2-win-x64"
PATH ...;%NODE_HOME%;%NODE_HOME%\node_modules;%NODE_BASE%\node_global_modules
2、在cmd控制台进行以下个性化设置：
注意 node_global_modules 的目录的设置需要和环境变量中指定的一致
npm config ls
npm config set prefix="D:\DevTools\Nodejs\node_global_modules"
npm config set cache="D:\DevTools\Nodejs\node_cache"
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
npm config ls
3、配置 nrm 切换源
通过 nrm 管理的源，代替 cnpm 的方式
npm install -g nrm
nrm ls
--------------------------------------------------------------------------------------
C:\Users\Admin>nrm ls
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
--------------------------------------------------------------------------------------
nrm use taobao
nrm ls
4、安装 vue-cli
npm install -g vue-cli
三、安装 VSCode
到官网下载 VSCode 安装包，进行安装；
1、VSCode设置中文语言显示
1、在商店中搜索Chinese（Simplied） Lang，安装；
2、使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；
3、修改locale.json文件下的属性“locale”为“zh-CN”;
4、重启 VSCode；
2、常用插件安装
1、Auto Close Tag：自动闭合 HTML/XML 标签；
2、Auto Rename Tag：自动完成另一侧标签的同步修改；
3、Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块；
4、Path Intellisense：自动提示文件路径，支持各种快速引入文件；
5、VS Color Picker：取色器；
6、open in browser：支持快捷键与鼠标右键快速在浏览器中打开 html 文件；
7、HTML CSS Support：智能提示 CSS 类名以及 id；
8、HTML Snippets：智能提示 HTML 标签，以及标签含义；
9、JavaScript(ES6) code snippets：ES6 语法智能提示，以及快速输入，支持.js，还支持.ts，.jsx，.tsx，.html，.vue 等；
10、Vue 2 Snippets：vue 智能提示；
11、Vetur：Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger；
12、ESLint：js语法纠错；
13、Prettier：一个比较武断的格式化工具；
14、Material Icon Theme：vscode图标主题；
15、vscode-icons：vscode图标库；
16、background：vscode软妹背景；
17、Debugger for Chrome：映射vscode上的断点到chrome上，方便调试；
18、GitLens：方便查看git日志；
19、Markdown Preview Enhanced：实时预览markdown；
20、markdownlint：markdown语法纠错；
21、jQuery Code Snippets：jQuery代码智能提示；
22、React/Redux/react-router Snippets：eact/Redux/react-router语法智能提示；
3、自定义代码片段（需要上述 Vetur 插件）
文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定
--------------------------------------------------------------------------------------
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
" <div class=\"$2\">",
" <!-- 这些写要显示的内容 -->$3",
" </div>",
"</template>",
"",
"<script>",
"// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"// 例如：import 《组件名称》 from '《组件路径》'",
"",
"export default {",
" // import引入的组件需要注入到对象中才能使用",
" components: {},",
"",
" // 接受父组件调用传参 String Number Boolean Array Object Function Promise",
" props: {},",
"",
" data() {",
" // 这里存放数据",
" return {}",
" },",
"",
" // 监听属性 类似于data概念",
" computed: {},",
"",
" // 监控data中的数据变化",
" watch: {},",
"",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created() {},",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted() {},",
" // 生命周期 - 创建之前",
" beforeCreate() {},",
" // 生命周期 - 挂载之前",
" beforeMount() {},",
" // 生命周期 - 更新之前",
" beforeUpdate() {},",
" // 生命周期 - 更新之后",
" updated() {},",
" // 生命周期 - 销毁之前",
" beforeDestroy() {},",
" // 生命周期 - 销毁完成",
" destroyed() {},",
" // 如果页面有keep-alive缓存功能，这个函数会触发",
" activated() {},",
"",
" // 方法集合",
" methods: {}",
"}",
"</script>",
"",
"<style lang='scss' scoped>",
"// @import url(); 引入公共css类",
"$4",
"</style>",
""
],
"description": "Log output to console"
}
}
--------------------------------------------------------------------------------------
上面代码中的 "prefix": "vue", 就是快捷键；
保存好之后，新建 .vue 结尾的文件，输入 vue 按键盘的 tab 就行。
4、vue开发自动格式设置（需要上述 Prettier 插件）
使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“setting.json”，点击确定后；
{
"file_peek.activeLanguages": [
"typescript",
"javascript",
"python",
"vue" // 添加vue支持
],
"file_peek.searchFileExtensions": [
".js",
".ts",
".html",
".css",
".scss",
".vue" // 添加vue支持
],
"editor.fontSize": 18,
"workbench.startupEditor": "newUntitledFile",
// tab 大小为2个空格
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},
"html",
"vue"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"git.confirmSync": false,
"window.zoomLevel": 0,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
// 安装 Prettier 插件 Prettier-Code formatter 让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": true,
// #使用单引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
}
四、创建 webpack 项目
# 通过 cmd 控制台 cd 到对应的一个项目里面 ：
vue init webpack vuedemo
# 选项全部选默认
cd vuedemo
npm run dev
最后修改：2019-12-11 10:33:20
© 著作权归作者所有
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
发表评论