vue前端框架搭建

Posted 2021-04-05 网页制作

#环境搭建
1.    安装node环境

访问https://nodejs.org/en/download/或者https://nodejs.org/下载node进行安装，windows下node安装与普通软件安装无差别，下一步，知道安装完毕即可。

2.    测试node环境是否安装完毕

Cmd运行命令行，node –version 查看node版本信息

3.    Npm随node一起安装的，还有npm包管理工具，运行npm –v  查看npm版本

4.    Git安装

Vue框架需要下载官网搭建好的demo,所以需要git工具下载安装包基本配置信息。点击git下载安装包，安装。

5.    蓝灯翻墙
安装vue依赖包需要访问github,如不能访问，请安装chrome翻墙工具蓝灯自行下载安装。如不能访问，请自行解决。

6.    到此，基本环境信息搭建完毕。其他系统安装，请自行查阅资料。

#安装vue-demo

1.    下载vue官方demo依赖包

1.    在空闲盘符新建空白文件件，这里，我们选取e盘，app文件夹

2.    打开git工具，cd e/app,切换到e盘app目录

3.    使用git命令git clone https://github.com/vuejs-templates/webpack.git下载vue环境依赖包，这里我们推荐后者，官方完整包。

4.    下载完成后，我们使用hbuild打开项目目录，就可以看到如下目录。

 
2.    安装vue脚手架工具vue-cli

1.    打开命令行，切换到e/app,运行命令行npminit，设置项目基本信息，安装环境依赖

2.    安装完毕后，运行命令vue-cli –save-dev,安装vue-cli工具,并添加到项目依赖配置。

3.    运行npm run dev,就可以看到node环境下的界面了。（这里显示的为修改后的页面）