Vue项目基础环境

Vue项目基础环境

Vue一般开发基于nodejs环境，提前安装好nodejs之后，才能进行下面的操作。

安装Vue Cli工具

最好先设置好registry，下载速度会快些，参考可选镜像：https://developer.aliyun.com/mirror/NPM

npm config set registry=https://r.cnpmjs.org
#或者是使用taobao镜像

先安装VueCli工具

npm install -g @vue/cli

检查版本信息：

vue --version
#输出：@vue/cli 4.3.1

新建Vue工程

由于我们后面会集成element-ui，因此我们新建一个名叫simple-element-ui-template的项目：

vue create simple-element-ui-template

按照提示建立工程，如果选择默认default选项，直接建立成功项目，不过缺少一些常用的组件，建议使用下面的【Mannally select features】。

image

选择自己需要和习惯选择组件，后面工程中是可以修改相关配置的，我选择的如下。

image

这个history模式需要说明下，是html5的history模式，如果开启路由格式不是走hash模式，直接使用url路径，但是一旦部署到服务器，需要服务器提供配置支持，否则路由会有问题，建议关掉。

例如：

history模式：server:port/route/path

普通的模式：server:port/#!/route/path

image

选择CSS处理框架，根据实际项目选择，element-ui也是使用Sass。

image

这个ESLint比较重要，规范和格式化代码格式，统一编码，建议选择ESLint + Standard config.

image image

下面的配置是针对，Babel、ESLint等配置使用独立的配置文件还是放到package.json中，个人认为还是独立出来比较方便。

image

后面有提醒是否保存相关的预设，可以保存也可以不保存。

建立成功后：

npm run serve
#另，vue项目打包生成：npm run build

运行结果可以访问：http://localhost:8081/，可以看到首页即算建立成功了。

image

vue还提供ui界面方式建立工程

vue ui
#自动打开浏览器：http://localhost:8000
#图形界面建立工程

浏览器里面可以看到：

image

图形界面，可以尝试看看。

Vue项目目录结构

image

​ 可以看到文件夹下面都是index.js，在其他地方可以使用import router from "./router"这样的方式来引用，ES6的标准语法。

下面可以安装其他组件工具了。