Vue 项目尚品汇（一）

一、开发环境构造

Vue-cli 脚手架初始化项目

node 平台和 webpack 和淘宝镜像环境

（一）脚手架

1.安装脚手架

在我们的项目文件夹中路径输入 cmd 然后在终端中输入 vue create app(项目名)

选择 vue 2 然后安装（因为是基于 vue2 开发的）

2.脚手架内容介绍

1）node_modules ：项目依赖文件夹

就是我们开发依赖的一些资源和框架

@babel 把 es6 的语法转化成 es5

@vue 框架

2）public：静态资源文件夹

单页面的 html 文件和图标

放到 public 文件夹中的静态资源 webpack 打包的时候会原封不动的打包到 dist 文件夹中

3）src ：源代码文件夹

程序员源代码文件夹，程序员开发使用的

assets：静态资源但是一般是多个组件共用的静态资源

放到 assets 文件夹中的静态资源 webpack 打包的时候会将静态资源当作一个模块打包到 JS 文件夹中

components：放非路由组件，常用的全局组件

App.vue 项目中唯一的根组件

main.js：程序的入口文件最开始执行的文件

gitgnore ：git 的忽略文件一般不碰

4）babel-config.js；配置文件

babel 相关一般不碰

5）package.json ：项目介绍

可以看成项目的身份证，项目叫什么，有哪些依赖，怎么运行里面都有

6）package-lock.json：缓存性文件

依赖从哪下的都有记录第二次下的速度会变快因为有缓存

7）readme.md ：说明文件

对脚手架项目使用和说明的认知里面有一些指令可以使用

3.运行浏览器自动打开网页

package.json 文件中修改属性在后面加上一句空格 --open

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

4.eslint 校验功能关闭

有时候声明变量不适用就报错我们不想这么轻易就报错影响我们使用我们就直接关了

在根目录下创建一个 vue.config.js 文件

里面配置如下即可关闭

module.exports = {
  lintOnSave: false
}

5.src 文件夹配置别名 @

在 jsconfig.json 文件中配置如下

遇见 @ 文件就当成 src 文件夹未来文件过多找的时候方便很多

但是不能在

"node_modules",

"dist"

这两个文件夹中使用

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}