搭建Vue项目

搭建Vue项目,第1张

步骤:以vue2为案例,vue2搭建项目是以js为底层代码;vue3是以ts为底层代码 1.安装node.js

下载node.js,安装时直接下一步,不需要任何 *** 作;建议安装到默认盘,避免后续配置环境(在命令符里输入node -v可以判断是否安装过)

2.安装vue脚手架

使用cmd打开终端安装脚手架

//安装脚手架到全局(安装一次以后都可以用,在命令符里输入vue -V可以判断是否安装过)
npm i @vue/cli -g
3.创建项目

使用cmd打开终端,找到想存入项目的路径创建项目

//创建项目
vue create 项目名称(建议使用字母)

4.设置预约设置

使用上下键控制选择,选取最后一个

5.选择需要的预约设置

有的会有choose Vue version(是否选取版本)选项,选取是

6.选择vue版本,这里选vue2 6.选取路由模式

Y:使用历史记录模式当路由
n:使用hash模式当路由
两种路由都可以,建议选n

7.选取CSS预设,选择Less

8.选取语法规则(是否为严格模式)

ESLint with error prevention only是错误时预防
ESLint + Standard config 是标准规格
选哪个都可以(无要求建议选第一个)

9.检查节点是否报错

Lint on save 编写完,保存时检查
Lint and fix on commit git提交时检查

10.存储插件配置位置:单独放在不同文件中 11.是否保存预设到将来的项目里:Y 12.给保存的预设取个:选择N时不需要起名,选择y或n都可 vue3搭建项目类似

1.查看vue版本:vue -V
在安装vue3脚手架时,要把vue2的脚手架先卸载(npm uninstall vue-cli -g全局卸载)
2.安装最新脚手架:npm i @vue/cli -g
3.创建项目
1.创建项目:vue create 项目名
2.选择手动选择:Manually select features
3.选择Choose…,Babel,Router,VueX,CSS…,linter
4.选v3
5.选y
6.选择Less
7.选ESLint with error prevention only
8.Lint on save
9.In dedicated config files
10.N
11.启动项目:npm run serve


创建项目后删除默认配置 1.清空src/views/App.vue中默认内容





2.删除默认生成的文件 components/HelloWorld.vueviews/Home.vueviews/About.vue 3.修改路由配置,只留基础框架 src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [ ]
const router = new VueRouter({
  routes
})
export default router
4.新增文件夹,在src下创建目录 /api/index.js >>存储请求函数模块/styles >> 样式文件模块/utils >> 工具函数模块

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1324282.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存