Article directory

Configure computer environment
- Install Node.js
- Configure the VUE scaffolding environment and configure the VUE project
VSCode configuration

Configure computer environment

Install Node.js

前往 node.js 安装电脑对应版本的node Node.js
Insert image description here
下载长期支持版，用的人多，应该稳定吧
安装好后，windows，进入cmd 输入 node -v 验证是否安装成功,Linux 则打开终端输入 node -v

输入 node -v后会出现安装的node版本号,安装成功
#Configure Taobao mirror:

解决国内的网络连接npm速度较慢，甚至很多东西都无法下载安装。安装  淘宝国内镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后 npm install 命令 更改为 cnpm install

Configure the VUE scaffolding environment and configure the VUE project

Configure the scaffolding environment:

安装node.js后

在cmd或者vscode打开终端

安装脚手架:    			cnpm install -g vue-cli 或者 npm install -g vue-cli
安装 webpack(打包js的工具): 	cnpm install -g webpack 或者 npm install -g webpack

以上操作 是 只需要配置一次安装一次即可

Create VUE

选择一个文件夹创建vue项目,CMD或者VSCode 终端 ;
输入:  	  vue init webpack 项目名 ，然后回车回车到底创建VUE项目;
运行项目:   先cd到项目文件夹，然后输入以下指令  npm run dev 启动;

npm run dev 启动
npm run build 编译项目得到 dist文件夹，复制到tomcat webpack,或者Nginx 安装文件夹中部署
Ctrl + c 输入y 停止项目,输入n 取消

Install dependencies that may be needed by the development office:
安装 VUEX

cnpm install vuex  --save 或者 npm install vuex  --save

安装axios

cnpm install axios --save 或者 npm install axios --save

安装 sass

/*sass sass-loader依赖于node-sass 所以一并安装*/
这里使用的是淘宝镜像 cnpm 安装 没有安装淘宝镜像的话 使用 npm
cnpm install	sass --save-dev
cnpm install	node-sass --save-dev
cnpm install	sass-loader --save-dev

如果 sass报错: ** Invalid options object. Sass Loader has been initialized using an options obj**
Insert image description here
Uninstall sass-loader and node-sass and install another version

cnpm uninstall sass-loader
cnpm uninstall node-sass

cnpm install node-sass@4.13.1 --save-dev
cnpm install sass-loader@7.1.0 --save-dev

The dependencies installed by cnpm install XXXX --save will be in package.json > dependencies .
The dependencies installed by cnpm install XXXX --save-dev will be in package.json > devDependencies .
Insert image description here

VSCode configuration

Chinese plug-in

1、安装中文简体VSCode插件,插件库搜索Chinese 安装第一个
Insert image description here

Vue code plugin

2.1、配置快速创建VUE模版,插件库中搜索 Vetur，让VSCode可以识别VUE代码
Insert image description here
2.2、文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

Insert image description here
2.3、输入 vue.json回车,将模版复制进去

{
    
    
    "Print to console": {
    
    
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='main-div'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//组件名称",
            "name: 'name'",
            "//父组件传递值",
            "props: {",
            " },",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "/**scoped 表示样式只在当前组件有效*/",
            "//@import url($3); 引入公共css类",
            "$4",
            ".main-div {",
            "padding: 10px;",
            "}",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

2.4、效果图
Insert image description here
2.5、使用，新建一个vue文件，输入 vue指令回车

vue syntax tips

Two plugins are recommended

Vue VSCode Snippets
VueHelper (Personally, this is the best one to use)

Insert image description here

vue code formatting

1. Install the plug-in:`beautify`

Insert image description here

1.1. Select the plug-in and right-click to configure beautify.language

Insert image description here
Find html and add vue

`.jsbeautifyrc`1.3. Create files in the working directory

.jsbeautifyrc content

{
    
    
  "brace_style": "none,preserve-inline",
  "indent_size": 2,
  "indent_char": " ",
  "jslint_happy": true,
  "unformatted": [""],
  "css": {
    
    
    "indent_size": 2
  }
}

File content parameter description

brace_style: Format style, please refer to the official description for details (to avoid conflicts with eslint's default check, it is recommended that this attribute be set to none, preserve-inline) :
indent_sizeindentation length (to avoid conflicts with eslint's default check, it is recommended that this attribute be set to 2)
indent_char: indentation Filled content (full of ♂)
jslint_happy:true: If you want to use it with jslint, please enable this option
unformatted:["a","pre"]: put tag types that do not need to be formatted here.
Note that template is not formatted by default. If the template tag of .vue needs to be formatted, please redefine the declaration attribute without template in .jsbeautifyrc.

~4. Configure formatting shortcut keys~

Search shortcut key settings: beautify.selection, set shortcut keys
Insert image description here

2. It is recommended to use Eslint plug-in formatting

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，推荐 ESLint+vscode 来写 vue。

每次保存，vscode就能标红不符合ESLint规则的地方，同时还会做一些简单的自我修正。

Insert image description here
配置格式化