vue框架搭建

如何搭建VUE框架

1.安装node

• 安装node.js安装vue前电脑中必须已经安装成功node.js

  • node.js 下载链接

  • 下载完成后，执行安装程序，直接进行安装即可

  • 安装完成后，打开命令行窗口（cmd）

  • 输入node -v 和 npm -v 可查看安装的node.js和npm的版本号

2.安装编辑器

• vscode下载链接

3.安装vue

• 使用npm进行安装

  • 缺点安装速度慢,因为资源在国外,可以使用国内镜像

• 使用国内镜像资源安装

• 首先切换淘宝镜像

npm config set registry http://registry.npm.taobao.org/

• 安装vue

  • 使用npm安装vue的脚手架

npm install –g @vue/cli

4.创建Vue项目

4.1创建文件

创建文件夹用vscode打开 ,点击终端按钮,cd 进入到你要创建的文件夹里

输入命令

vue create vue01

4.2选择配置信息

• 通过上下方向键选择,然后回车确认

选择Manually select features 自定义配置

• 之后按空格键选择要安装的资源配置,带*号说明选中啦

我一般选择 Babel Router VueX CssPre...选完直接回车

4.3选择版本

上下方向键选择版本,这里我们选择vue2,直接回车

4.4路径模式选择

• 是否使用history router? 我选n

4.5请选择Css预处理语言 选择Less

主要为css解决浏览器兼容,简化css代码等问题

4.6如何存放配置选择in package.json

我都会统一集成在package.json文件

4.7是否保存本地配置?我选N

这里选择yes会保存一个模版,以后创建项目可以直接选择,但是大家都是刚学习应该多练手,不建议保存

4.8搭建完毕

到这里VUE项目就搭建完毕啦

输入命令 进入vue01的路径里

cd vue01

执行启动命令

npm run serve

复制访问

浏览器打开