一 使用 vue cli创建
1 首先需要保证vue-cli版本在4.5.0往上 在终端执行命令 vue -V查看版本
2 如果低于 4.5.0 执行 npm install -g @vue/cli 升级版本
3 创建项目 执行 vue create 项目名,然后选择vue3选项
执行结果
4 进入项目文件夹 执行npm run serve 运行项目
二 使用vite 创建
什么是vite 新一代前端构建工具
优势:
开发环境中 无需打包 可以快速的冷启动
轻量快速热重载
按需编译
详细参见 vite 官网 :https://vitejs.cn
创建步骤:
1 创建项目 执行 npm init vite-app 项目名
2 进入项目文件夹
3 安装依赖 执行 npm install
4 运行 执行 npm run dev
vue3两种构建方式
vite构建vue3项目
1.#npm init vite@latest
2.#Ok to proceed?(y) y
3.#Project name: vite-demo //项目名称
4.#Vue //选择vue
5.#Select a variant: TypeScript //加TypeScript
vue脚手架构建vue3项目
1.#npm init vue@latest
2.Project name:vue-demo
3.Add TypeScript?:yes
4.Add JSX Support?:yes
5.Add Vue Router for Single Page Application development?:yes
6.Add Pinia for state management?:yes
7.Add Vitest for unit Testing?:yes
8.Add Cypress for end-to-end testing?:yes
9.Add ESLint for code quality?:yes
10.Add Prettier for code formatting?:yes
vue-cli安装及使用(旧版本)
* 全局安装 vue-cli
`$npm install --global vue-cli`
`$cnpm install --global vue-cli`
* 创建一个基于webpack模板的新项目
`$vue init webpack my-project --标准`
`$vue init webpack-simple my-project --简易模式 `
* 安装依赖
`$cd my-project`
`cnpm instll / npm install`
`$npm run dev`
## 另一种vue-cli3安装及使用
* 检查版本
`vue --version`
* 如果想用最新的cli3,那么需要先卸载vue-cli
`$npm uninstll vue-cli -g`
* 全局安装 vue-cli
`$npm install --global @vue/cli`
`$cnpm install --global @vue/cli`
`$yarn global add @vue/cli`
* 创建一个新项目,必须cd到对应的一个项目里面
`$vue create hello-world `
`$cd hello-world`
* 安装依赖
`cnpm instll / npm install`
`运行:npm run serve`
`编译:npm run build`
## vue-cli使用注意事项
* 如果vue-cli的版本小于3,那么将不能使用vue-cli创建项目
<font color=red size=72>
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
`npm uninstall -g vue-cli`
`npm install -g @vue/cli`
</font>
* 先卸载当前的版本npm uninstall -g vue-cli
* 安装3版本npm install -g @vue/cli
在国内下载npm包的时候,是非常慢的,所有推荐大家采用淘宝的镜像,使用下面的命令即可
`npm install -g cnpm --registry=https://registry.npm.taobao.org`
## vue路由配置
* 1.安装
`npm install vue-router --save / cnpm install vue-router --save`
* 2.引入并Vue.use(VueRouter) (main.js)
`import VueRouter from 'vue-router'`
`Vue.use(VueRouter)`
* 3.配置路由
3.1创建组件并引入组件
3.2定义路由
`const router = [`
`{path: '/home',components:Home},`
`{path: '/news',components:News},`
`{path: '*', redirect: '/home'} /*默认跳转路由*/`
`]`
3.3实例化VueRouter
`const router = new VueRouter({`
`routes //(缩写)相当于routers:routes`
`})`
3.4挂载
`new Vue({`
`el:'#app',`
`router,`
`render:h=>h(App)`
`})`
3.5根组件的模板里面放上这句话
`<router-view></router-view>`
一般情况是要配合router-link使用
`<router-link to="/home">首页</router-link>`
`<router-link to="/news">新闻</router-link>`