vue初始化

初始化脚手架

---

### **说明**

---

1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

2. 最新的版本是 4.x。

3. 文档: https://cli.vuejs.org/zh/。

具体步骤

---

第一步（仅第一次执行）：全局安装@vue/cli。

//如出现下载缓慢请控制台配置 npm 淘宝镜像：
npm config set registry 
//控制台运行
npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create 项目名 

第三步：启动项目

npm run serve 

备注：

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，

请执行：vue inspect > output.js

手脚架自定义初始化的配置

---

1.这里的选项是Vue3,Vue2的标准配置和一个自定义配置

2.在选择自定义后才需要进行这一步和下面的所有操作,这里主要是选择需要安装的插件(即便这里没有安装也没有关系,可以之后通过npm安装),

3.这里选择vue的语法版本,现在大多都还是在使用vue2

4.询问路由跳转是否使用history模式,可以选也可以不选

5.这里询问css的预处理,根据个人情况选择

6.选择代码的自动检测风格,随便选就行,详细的文章看这个https://blog.csdn.net/tangkebo/article/details/123270936

7.选择代码的提交规范,一般就用第二个就行

lint on save:代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error

lint and fix on commit:代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。

8.选择在哪里放置Babel、postss、ESLint等的配置。 一般就选package.json

9.询问是否需要将以上的配置保存为预设,选否就行,选是的话就是配置预设的名字与保存地址

一键生成.vue模版

1. 安装一个插件，识别vue文件

2. 新建代码片段

文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

3. 粘入自己写的.vue模板

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

上面代码中的 "prefix": "vue", 就是快捷键；保存好之后，新建.vue结尾的文件试试,新建vue文件之后，输入vue 按键盘的tab就行。

安装 less loader

npm i less less-loader -save

安装vue-cli问题总结

1. 如果你是使用window系统，打开vscode的时候，用管理员模式打开

2. 如果之前装node,版本低于8.9，安装最的版本（10.x以上）；如果之前 node 安装在其它盘，请重新按照默认安装到C盘

3. 运行命令 vue serve index.vue 没有效果，那么你们就看看是否在 index.vue 所在目录运行

4. 另外mac系统，linux 系统，运行命令之前，请加 sudo 如下所示

   sudo npm install @vue/cli -g
   

5. 如果你是window系统，并且vscode里面的终端是 powershell,请先切回 cmd

Vue-cli 3.0 关闭eslint

在根目录下新建 vue.config.js 文件

输入

module.exports = {

lintOnSave: false

}