一。在搭建前,首先检查自己的搭建环境
使用cmd,打开命令行,使用node -v指令,查看自己的node版本(是否安装)

使用npm -v指令,查看自己的npm版本(是否安装)

二。搭建Vue项目环境
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:
在命令行,cd 目录路径 (进到该工程文件下)
如果已经安装了git,则在该工程文件下右击,选择Git Bush Here
1、全局安装vue-cli
安装vue脚手架输入指令:vue init webpack 1111。(这里的“1111” 是项目名称,可以自己取名字,但是不可以用中文。)

2.点击回车以后,填写相关提示(名字,项目描述,作者,等等),然后一直回车或者yes,就创建一个基于 webpack 模板的新项目

3.回到刚才的工程文件下,就会有项目录了

4.打开Visual Studio Code软件,选择文件,打开文件夹,选择打开刚才的项目工程文件夹1111,接下来咱们的Visual Studio Code软件左边项目管理器中,就会有项目目录结构了


5.一般咱们的项目页面文件都在src/components/自己命名的一些vue文件

6.项目目录结构中router/index.js。这个文件里面配置相关路由信息,

三。需要执行该项目的话,点击Visual Studio Code软件上方的,新建终端,
1.输入指令npm i,安装相关依赖,

安装完成依赖后,左边项目管理器中,多出了一个node _modules文件,不用管,就可以了

2.最终,在终端命令行输入 npm run dev 指令回车,运行咱们的项目就行啦,运行完成后,把把网址粘贴到浏览器中就可以了。


网友评论