vue项目流程demo示例

汤卓杰

已于 2023-03-07 18:02:31 修改

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-07 18:00:26 首次发布

本文链接：https://blog.csdn.net/tang31415926/article/details/124059435

版权

前言：自己写从头做一个vue项目，没什么技术，主要是温顾流程。

> 没写完，只写到创建完项目

TS数据检测：prettier+eslint

1、准备工作

node：

node下载官网下载安装包，选默认设置安装，会自动配置变量，若更改安装地址，修改（默认系统变量）变量path中C:\Program Files\nodejs\为新地址。（Window）默认全局安装文件所在位置：C:\Users\username\AppData\Roaming\npm\node_modules

安装完成使用node -v检测版本，这里使用vite创建vue项目，需要node版本>= 12.0.0

此后用(c)npm指令，加 -g表示全局安装，否则会在当前路径安装；加 -d（或 -dev）表示开发环境安装，将配置写入到package.json文件中devDependencies下，打包时不将该依赖打包；加 -s表示用在正式环境，将配置写入到package.json文件中dependencies下。

淘宝镜像：

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

dos窗口使用指令下载全局安装，安装完成后，dos窗口cnpm -v正常显示版本号，即为安装成功。安装成功后，基本可以用cnpm代替npm，在中国大陆使用cnpm下载速度会大幅提升。

yarn

npm install -g yarn

同理终端安装，yarn -v检测。

vite

vite官网

yarn create vite

同理终端安装，vite -v检测。

IDE集成开发工具

idea、Eclipse、EditPlus、SublimeText、VScode等，有免费有收费，有正版有盗版，这里略。

2、创建项目

初始化项目

项目名不建议中文，不允许大写字母。不建议杠-_以外的符号

#yarn
yarn create @vitejs/app

#(c)npm
npm init @vitejs/app

若网不好，会报错：

An unexpected error occurred: "https://registry.yarnpkg.com/@vitejs%2fcreate-app: connect ETIMEDOUT 104.16.21.35:443"

换成国内镜像，【参考：网不好！...】

### npm
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

### yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

创建完后按提示选择：

### 项目名?直接回车默认"vite-project"
? Project name: » vite-project

### 选择一个框架，箭头选中后，回车提交
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

### 选择版本（我使用vite就是为了使用ts）
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts

### 完成，运行以下指令
Done. Now run:

  cd vite-project //进入到项目目录
  yarn //下载依赖，也可以npm i，依赖配置更改后都要运行该指令，初次也要下载vite
  yarn dev //运行dev

### 运行成功，该窗口不关即可用浏览器访问以下地址
vite v2.9.1 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose  //默认为空，需要进项目配置
ready in 289ms.

依照步骤即可出现：

文件目录：

目录/文件	说明
.vscode	vscode的配置文件，我电脑没装vscode，也在创建项目时默认生成了这个文件夹。
.idea	idea配置文件，idea自动生成
node_modules	npm 加载的项目依赖模块
public	静态资源目录，如图片、字体等。一般放下载的模板等。
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 .env：全局默认配置文件，无论什么环境都会加载合并。 .env.development：开发环境的配置文件，(默认无) .env.production：生产环境的配置文件，(默认无) main.ts: 项目的核心文件。对应以前的main.js
.gitignore	文件控制 Git 仓库中应排除跟踪的文件(可由文件类型、路径、通配符等确立)。你和你的团队可以随时更新这个文件来控制忽略哪种类型的文件。 copy过来的，不会用。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
tsconfig.json	ts配置文件，预编译，错误提醒等
tsconfig.node.json
vite.config.json	取代了以前的webpack.json，项目的配置内容
yarn.lock	锁住依赖版本，一般自动变更，不建议手动变更。不懂，以后再深入研究......

3、全局设置

主题设置

安装elementPlus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

全部导入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
    .use(ElementPlus)
    .mount('#app')

按需导入，则在打包时进打包用到的部分。需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。我这里用这个官网的方法失败报错了，大概版本的问题。————（最后基本确定是依赖的问题，确保完整下载依赖就没报错）。

使用vite github方法：（安装vite-plugin-style-import）