文章目录
一、Node.js安装二、Vue-Cli安装三、Vue项目创建1、项目创建2、项目依赖导入2.1 vue-router(路由)3、项目配置3.1 router.js(路由配置)4、测试效果一、Node.js安装
到Node.js官网(/zh-cn/)上,下载并安装Node.js,选择【长期维护版】即可
使用安装包安装,选择安装路径可以根据自己的需要改一下(比如我安装在了D:\Environment\nodejs\
目录下)。
这个Necessary Tools的选项可以勾选上。
其他基本一路直接【Next】即可。
安装完成后,在cmd窗口输入node -v
,可查看到node的版本号,即安装成功。
二、Vue-Cli安装
打开cmd窗口,输入npm config set registry http://registry.
设置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.jsimport 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.jsimport 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
启动项目
打开浏览器进入相关测试网页,我们发现项目环境搭建完成
想要练手、学习什么的,就可以顺着这个项目往下继续做了