Visual Studio Code+Vue

VisualStudio+Vue环境搭建

罗汉翔

2755人浏览 · 2022-04-24 15:00:11

罗汉翔 · 2022-04-24 15:00:11 发布

参考链接：

（一）Vue——如何创建一个Vue项目(完整步骤) - 㭌（mou）七 - 博客园

基于Visual Studio Code搭建Vue开发环境

初学Vue------使用Vue-cli搭建项目_0?0的博客-CSDN博客

网上有关vue的一个小demo ：库里博客: 一个关于库里的博客，hhdRight/ChaoCP-page

1 安装node.js

1.1 node.js下载+安装

下载地址： https://nodejs.org/en/
安装详细步骤：Node——安装的详细步骤 - 㭌（mou）七 - 博客园

node安装后的设置(node_global和node_cache)

快速查看node.exe的安装路径,在cmd中：where node

本地安装：npm install express 会安装到当前项目

全局安装：npm install express -g 会安装到指定的目录(node_global)

设置node_global和node_cache

1. 在node安装目录创建node_global和node_cache文件夹

另外，如果没有设置全局目录node_global，那么全局安装的文件将会保存到 C:\Users\Admin\AppData\Roaming\npm

2. 所以，安装好node后，要设置一下node_global和node_cache(node缓存文件夹)

设置环境变量：

用户变量设置：添加node安装目录下的node_global的路径

系统变量设置：添加变量 NODE_PATH 值为：node安装目录下node_modules的路径

3. 打开命令行,执行

npm config set prefix "node_global的路径"   

npm config set cache "node_cache的路径"

pm config list // 查看npm基本配置

4. 测试

执行npm install express -g 后，查看node_global/ node_modules文件夹下会有express文件夹

5. 安装淘宝镜像cnpm
淘宝镜像cnpm跟npm的关系可以理解为github和gitee

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2 检查node.js安装成功

node -v
npm -v

1.2 cnpm(使用淘宝的镜像)

镜像网站：npmmirror 中国镜像站
输入：npm install -g cnpm –registry=https://registry.npm.taobao.org
即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。
查看是否安装成功：cnpm -v

1.3 Vue3项目需要注意根据需求安装不同版本的Node

注意： vite 要 Node.js 12.0.0 以上版本，但推荐在 14.0.0 以上以获得最佳支持；

　　　　　vue-cli 4.5 需要 Node.js 10.12.0 以上版本；

　　　　　vue-cli 5.0（目前还是 beta 版）也需要 Node.js 12.0.0 以上版本。

　　　　　Webpack 4 需要 Node.js 6.11.5 以上版本，但推荐在 8.9.4 以上以获得最佳支持；

　　　　　Webpack 5 需要 Node.js 10.13.0 以上版本。

　　　　　element-plus 官方表示不支持 Vue 2.X

1.4 更新npm到最新版

npm install npm -g //更新npm到最新版

npm install -g npm //更新npm到最新版

2 安装vs code

参考文章1：

Visual Studio 2019下载及安装的详细教程_一位懒得写博客的小学生的博客-CSDN博客_vs软件下载

或者：

国内的下载地址：http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.43.0.exe（windows64位）

3 安装@vue/cli:

全局安装vue-cli

安装好了node，可以直接全局安装vue-cli

方式一：npm install -g @vue/cli || npm install -g vue-cli

方式二：全局安装vue-cli
npm install --global vue-cli 或 cnpm install --global vue-cli

　　　　 (cnpm 安装环境和依赖包会更快推荐使用cnpm)

如果安装失败，则用 npm cache clean清理缓存，然后再安装

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack

如果你是用cnpm/npm安装的，并且是安装在全局的，那么默认安装好的vue安装位置就在：
```
C:\Users\Administrator\AppData\Roaming\npm\node_modules
```
如果你是用 cnpm/npm安装的，并且是安装在全局的，并且之前配置过node_global和node_cache文件夹和那么vue就安装在NodeJS安装目录下的node_global下
```
查看vue的位置

where vue
```

查看版本vue -V

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

C:\Users\Admin>vue -V
@vue/cli 5.0.4

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本

感兴趣可以继续往下参考：

首先来到Vue.js的gthub页面点击Vue-ci

Vue.js的gthub页面

Vue.js的gthub页面 Vue-ci锚点

去参考Readme

4 配置VS code使用英文/中文：

按下ctrl+p, 输入: > Config, 选择： “Configure Display Language"
将原先默认的英文："locale": "eh" ----> 改为中文："locale": "zh-cn"

5 新建vue工程：

输入----> vue init webpack vue-demo

或者

输入----> vue create vue-demo

最终呈现效果就是新建了个vue-demo文件夹，所有文件生成到里面。

其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板vuejs-templates · GitHub

说明：

Project name ==> 项目名称  自己输入；

Project description ==> 项目描述  自己输入；

Author ==> 项目作者  自己输入；

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

新版需要选择运行依赖安装方式选择第三个 方便不费时

Should we run `npm install` for you after the project has been created? (recommended)
    Yes, use NPM
    Yes, use Yarn
    > No, I will handle that myself           

完成以上动作后， 会在当前工程目录下生成一个 .eslintrc.json文件

问题1:

目标目录下无法执行命令

问题1解决方案:

执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned即可，根据信息回复输入Y或者A不起作用

仔细看它的提示然后按照提示输入：Set-ExecutionPolicy -Scope CurrentUser
然后再输入：RemoteSigned
最后输入A即可。

问题2:

输入命令后提示Please run npm i -g @vue/cli-init and try again.

PS C:\Users\Admin\Desktop\vue-init> vue init webpack vue-demo
vue init webpack vue-demo
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.

问题2解决方案：

>>> npm install -g @vue/cli-init
>>> vue init webpack vue-demo

6 进入项目，安装依赖

已安装淘宝镜像：cnpm i 或 cnpm install
否则输入： npm i 或 npm install

安装依赖后的文件夹后，多了一个node_modules文件夹

7 安装插件

`1 安装vetur插件`

当你准备打开一个vue文件时，根据编辑器右下方的提示，点击安装

问题1：

Vetur can't find `tsconfig.json` or `jsconfig.json` in c:\Users\Admin\Desktop\vue-init.

问题1：解决方案

参考链接：https://blog.csdn.net/qq_29733191/article/details/123307128

原因

Vetur 0.31.0版本新增了一个vetur.config.js的配置文件，

在这个版本之后，会优先查找项目中是否配有tsconfig.json（ts项目）或者jsconfig.json（js项目），

没找到这2个文件就去找vetur.config.js，如果都没有，就会抛出这个提示。

说明

VSCode的JavaScript支持可以在两种不同的模式下运行：

文件范围（没有jsconfig.json）

在此模式下，在VSCode中打开的JavaScript文件被视为独立单元。

只要文件a.js没有显式引用文件b.ts（使用///引用指令或CommonJS模块），两个文件之间就没有共同的项目上下文。

显式项目（使用jsconfig.json）

JavaScript项目是通过jsconfig.json文件定义的。目录中存在此类文件表示该目录是JavaScript项目的根目录。

文件本身可以选择列出属于项目的文件，要从项目中排除的文件，以及编译器选项（见下文）。

当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进。

因此，当您在新工作空间中打开JavaScript文件时，我们提供了一个创建jsconfig.json文件的提示。

解决方法（3选1）

1.配置Vetur插件，忽略提示：

vetur.ignoreProjectWarning: true

2.在项目根目录创建jsconfig.json文件，加入代码：

{undefined
“include”: [
“./src/*”
]
}

3.在项目根目录创建vetur.config.js文件，加入代码：

module.exports = {undefined
// vetur配置，会覆盖vscode中的设置。 default: {}
settings: {undefined
“vetur.useWorkspaceDependencies”: true,
“vetur.experimental.templateInterpolationService”: true
},
// 普通项目采用默认配置 default: [{ root: './' }]
}

2 安装eslint插件

npm install -g eslint

error1：如果eslint未生效查看并检查下eslint server是否启动或报错

error2:
使用vue/cli 3.0 自定义配置项创建工程后, vscode中eslint无法自动修复格式的问题，原因: .eslintrc.js文件中缺少了配置, 如下图所示, 添加右侧红框部分后, 添加依赖eslint-plugin-html后即可

plugins: [
'vue' ,
'html'
]

module.exports = {
    // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
    root: true,
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    parserOptions: {
        // 代码是 ECMAScript 模块
        sourceType: 'module'
    },
    env: {
        // 预定义的全局变量，这里是浏览器环境
        browser: true,
    },
    // 扩展一个流行的风格指南，即 eslint-config-standard
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        // 此插件用来识别.html 和 .vue文件中的js代码
        'html',
        // standard风格的依赖包
        "standard",
        // standard风格的依赖包
        "promise"
    ],
    //配置的一些规则
    'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}


最终的.eslintrc.json文件

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": "off",
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

error3 报错： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)

// 统一换行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默认unix
// off或0: 禁用规则
'linebreak-style': 'off'

8 输入 npm run dev，启动项目

9 打包上线

自己的项目文件都需要放到 src 文件夹下

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。

附录

vue-cli项目结构详情

项目结构详情

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^