文章目录

一、Node.js安装
二、Vue-Cli安装
三、Vue项目创建
- 1、项目创建
- 2、项目依赖导入
- - 2.1 vue-router（路由）
- 3、项目配置
- - 3.1 router.js（路由配置）
- 4、测试效果

一、Node.js安装

到Node.js官网（https://nodejs.org/zh-cn/）上，下载并安装Node.js，选择【长期维护版】即可

使用安装包安装，选择安装路径可以根据自己的需要改一下（比如我安装在了D:\Environment\nodejs\目录下）。

这个Necessary Tools的选项可以勾选上。

其他基本一路直接【Next】即可。

安装完成后，在cmd窗口输入node -v，可查看到node的版本号，即安装成功。

二、Vue-Cli安装

打开cmd窗口，输入npm config set registry http://registry.npm.taobao.org设置npm指令使用淘宝镜像

输入npm install -g @vue/cli来安装Vue-Cli

三、Vue项目创建

1、项目创建

选取好自己项目想要放置的文件夹，比如我这里选择了D:\Mywork

在选好的目录下，在目录栏中输入cmd按下回车，呼出cmd窗口

输入vue create model-proj创建Vue项目（model-proj为项目名，可以根据自己需要更改）

一直按回车键以创建项目

创建完成后使用命令cd model-proj跳转到项目目录，先不要关闭cmd窗口，为项目导入依赖时将会用到。

将创建完成的Vue项目使用自己的相关IDE打开（如：HBuilderX、VS Code）

在cmd窗口、项目目录下输入npm run serve运行项目，检查项目是否能成功运行

测试完成后，回到cmd窗口，多次按下Ctrl+C停止项目运行，以便我们后续导入项目相关依赖

2、项目依赖导入

2.1 vue-router（路由）

在cmd窗口、项目目录下，输入命令npm install vue-router --save，导入vue-router的依赖

3、项目配置

3.1 router.js（路由配置）

在项目的src目录下创建pages目录，然后创建相应的测试页面test.vue

在项目的src目录下创建文件router.js

配置路由文件router.js将测试页面test.vue引入，内容如下：

// router.js
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)let router = new Router({routes: [{path: '/',name: 'test',component: () => import('./pages/test.vue')}]
})export default router

修改src/main.js文件，为项目引入路由router

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

4、测试效果

修改项目中的src/App.vue文件如下：

<template><div id="app"><router-view></router-view></div>
</template><script>export default {}
</script><style>
</style>

在测试页面test.vue中随便写入一些内容，代码如下：

<template><div><h1>测试………………</h1></div>
</template><script>
</script><style>
</style>

接下来我们开始运行项目观察测试效果。在cmd窗口、项目目录下，输入npm run serve启动项目

打开浏览器进入相关测试网页，我们发现项目环境搭建完成

想要练手、学习什么的，就可以顺着这个项目往下继续做了

Vue-CLI搭建Vue项目相关推荐

vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目源码(欢迎star): 前端项目代码后端项目代码系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
vue CLI脚手架搭项目
1.安装 node.js环境官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到安装完成后cmd打开终端,输入node -v ,npm - ...
使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...

Vue-CLI搭建Vue项目