一、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 = false

new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

3.2 vue.config.js(Vue配置选项)

由于Vue中eslint检测比较强,可能导致一些不必要的报错,这里我们选择关闭eslint.

修改项目中的vue.config.js文件如下:

module.exports = {
	lintOnSave: false,
}

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启动项目

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

在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐