vscode创建vue项目

_蓝胖子

于 2024-10-09 10:43:57 发布

阅读量2.6k

点赞数 16

文章标签： vscode vue.js ide

本文链接：https://blog.csdn.net/L_n1314/article/details/142780600

版权

一、前情提要

只适用于已安装node、修改过淘宝镜像等前期准备工作，直接开始进行项目创建。

二、创建新项目

1、先创建一个文件夹，也可以通过VSCode打开已有文件夹。（此文件夹为新创建项目的上级文件夹）

2、选中打开的文件夹，点击右上角打开终端，也可以通过查看打开终端

3、切换Command Prompt

4、输入npm create vite@latest，再输入项目名称->回车->选中vue，不知道怎么选就一直回车完成接下去的选项(vite)

使用npm create vue@latest创建，则可以在一定程度上直接配置好相对应的一些依赖等。

vite是下一代前端开发与构建工具，目前官方推荐使用vite来构建项目。

5、最后按照创建成功后的提示输入命令即可运行项目 <template></template>

三、项目运行过程中遇到的问题及解决办法

1、vue3 <template></template> 标签内多根节点报错问题解决办法

【注】

官方提供了多种创建命令，如下：

npm init vite@latest

yarn create vite

pnpm create vite

根据自己的情况选择合适的命令即可，我使用的是pnpm，所以：

pnpm create vite

然后会让给你输入一个项目名称。再选择一个framework，因为我们创建vue项目，所以选择vue，再选择代码语言，我习惯使用JavaScript。如下：

✔ Project name: … logistics-system

✔ Select a framework: › Vue

✔ Select a variant: › JavaScript

项目创建完成会提示你后续需要做的工作，如下：

cd vite-project /* 项目名称*/
npm install
npm run dev

运行项目

根据提示操作即可

1）先进入项目

cd vite-project /* 项目名称*/

2）然后执行：会自动安装所有依赖，安装完成后执行

pnpm install

3）启动项目

npm run dev

输入命令就可以运行项目了，这时候可以看到：

➜ Local: http://localhost:5173/

➜ Network: use --host to expose ➜ press h to show help

说明项目成功运行起来了，访问http://localhost:5173/ 即可看到默认页面了。

配置项目

成功创建并运行项目后，下面我们就需要进行一些配置，这样方便我们后续开发。

setting.json

vscode可以在项目配置个性的设定，首先需要创建setting.json文件，在vscode中点击左下角的设置按钮，选择命令面板（或者直接使用快捷键 shift+command+p），然后搜索“setting.json”，选择“Open Workspace Setting(JSON)”即可。

然后就可以看到在项目的.vscode目录下新建了一个setting.json文件，当然这个是个空文件，我们按照相关规则进行配置即可，下面是一个示例：

{

"files.autoSave": "off",

"git.autofetch": true,

"files.associations": {

"*.cjson": "jsonc",

"*.wxss": "css",

"*.wxs": "javascript",

"*.wpy": "javascriptreact",

"*.py": "python"

"emmet.includeLanguages": {

"wxml": "html"

"minapp-vscode.disableAutoConfig": true,

"git.confirmSync": false,

"search.actionsPosition": "right",

"search.exclude": {

"**/dist": true

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"editor.suggestSelection": "first",

"files.exclude": {

"**/node_modules": true,

"*/node_modules": true

"sync.gist": "686f9b0e863088a613cdc96e5bc81c55",

"[less]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[vue]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"beautify.language": {

"js": {

"type": ["javascript", "json", "jsonc"],

"filename": [".jshintrc", ".jsbeautifyrc"]

"css": ["css", "less", "scss"],

"html": ["htm", "html"]

"editor.tabSize": 2,

"sync.autoUpload": true,

"sync.forceUpload": false,

"sync.forceDownload": false,

"sync.autoDownload": true,

"beautify.config": "",

"prettier.trailingComma": "none",

"prettier.arrowParens": "avoid",

"editor.fontSize": 13,

// "workbench.colorTheme": "Visual Studio Dark",

"editor.accessibilitySupport": "on",

"diffEditor.ignoreTrimWhitespace": false,

"editor.quickSuggestions": {

"strings": true

"editor.rulers": [],

"[html]": {

"editor.defaultFormatter": "vscode.html-language-features"

"extensions.closeExtensionDetailsOnViewChange": true,

"[javascriptreact]": {

"editor.defaultFormatter": "svipas.prettier-plus"

"[jsonc]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[json]": {

"editor.defaultFormatter": "vscode.json-language-features"

"[typescript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[typescriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"eslint.format.enable": true,

"editor.formatOnSave": true,

"prettier.singleQuote": false,

"prettier.semi": true

}

注意：这里使用了格式化配置，需要先在vscode中安装插件prettier。这样当编辑文件后保存的时候就会自动进行格式化。

src别名

在vite.config.js中为src目录配置一个别名，如下：

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import path from "path";

...

// https://vitejs.dev/config/

export default defineConfig({

resolve: {

alias: {

"@": path.resolve(__dirname, "src")

}

plugins: [vue()]

...

});

这样在import的时候，就可以直接使用“@/...”了。

但是开发过程中会发现输入"@"并没有智能补全的提示，还需要在jsconfig.json（没有则创建一个）中配置一下，如下：

{

"compilerOptions": {

"target": "es5",

"module": "esnext",

"baseUrl": "./",

"jsx": "preserve",

"moduleResolution": "node",

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"paths": {

"@/*": ["./src/*"]

"lib": ["esnext", "dom", "dom.iterable", "scripthost"]

"exclude": ["node_modules"]

}

在paths中配置一下，然后需要重启一下vscode，否则无法生效。

开启https

在vite.config.js中可以进行服务器相关配置，比如端口、代理、开启https，如下：

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import path from "path";

export default defineConfig({

resolve: {

...

plugins: [

vue()

base: "/", // 打包路径

server: {

host: "0.0.0.0",

port: 3300, // 服务端口号

open: true, // 服务启动时是否自动打开浏览器

cors: true, // 允许跨域

https: true

// proxy: {

// "/api/": {

// target: "https://xxx.xxx.cn",

// ws: true,

// changeOrigin: true

// }

}

});

这样当我们执行

pnpm dev

开启服务后会自动打开浏览器，并且以https的方式访问。

但是这里有一个问题，在vite3之后单独开启https并不够，这时候运行服务打开后会发现打不开页面，提示“协议不受支持”。官方文档这样说的：

server.https¶

类型：

boolean | https.ServerOptions

启用 TLS + HTTP/2。注意：当

server.proxy
选项也被使用时，将会仅使用 TLS。
这个值也可以是一个传递给

https.createServer()
的选项对象。
需要一个合法可用的证书。对基本使用的配置需求来说，你可以添加 @vitejs/plugin-basic-ssl 到项目插件中，它会自动创建和缓存一个自签名的证书。但我们推荐你创建和使用你自己的证书。

所以还需要安装一个@vitejs/plugin-basic-ssl插件，执行命令

pnpm install @vitejs/plugin-basic-ssl -D

在开发环境使用即可，线上有正式签名。

然后在vite.config.js中进行配置，如下：

...

import basicSsl from "@vitejs/plugin-basic-ssl";

export default defineConfig({

resolve: {

...

plugins: [

...

vue(),