Vue项目实战_尚品汇_01_初始化项目、配置项目参数

1、初始化项目

新建文件夹、在此目录下打开CMD 并输入：vue create csnz_vue

E:\VueProject\Project>vue create csnz_vue

一上来就报错…

得亏报错原因还看得懂… 如果看不懂就翻译呗

vue create是仅限vue CLI 3的命令，您正在使用vue CLI 2.9.6。
您可能需要运行以下命令以升级到Vue CLI 3

由于我们使用的是Vue2版本所以我们改用如下命令进行项目初始化

vue init webpack csnz-vue

下面还有提示你如何启动项目的

此时可以查看项目文件结构 注意此时还没有 node_modules 文件夹

我们执行命令：npm install 下载对应的依赖 ，执行完之后会出现 node_modules 文件夹，此时我们再去npm run dev才有用 !

最后成功会弹出链接：

我们手动输入网址 进行访问也访问得到~

2、配置项目参数

2-1、配置项目运行时自动打开浏览器展示

在package.json 文件中 ，在 scripts 对象中的 dev 或者 serve 结尾追加 --open

2-2、关闭 ESlint校验功能

在根目录下，创建一个 vue.config.js 文件，并输入如下代码

module.exports = {
  // 关闭 ESlint
  lintOnSave : false
}

这样子就能避免不必要的语法提示~

2-3、 为 src 目录 配置别名

新建一个 jsconfig.json 配置src目录的别名为 @

@ 代表的是 src 目录，以免后期文件数量过多，找的时候比较方便

输入如下代码

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":{
        "src/*"
      }
    }
  },
  //配置别名时 这两个文件除外
  "exclude":[
    "node_modules",
    "dist"
  ]
}