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】。
选择自己需要和习惯选择组件,后面工程中是可以修改相关配置的,我选择的如下。
这个history模式需要说明下,是html5的history模式,如果开启路由格式不是走hash模式,直接使用url路径,但是一旦部署到服务器,需要服务器提供配置支持,否则路由会有问题,建议关掉。
例如:
history模式:server:port/route/path
普通的模式:server:port/#!/route/path
选择CSS处理框架,根据实际项目选择,element-ui也是使用Sass。
这个ESLint比较重要,规范和格式化代码格式,统一编码,建议选择ESLint + Standard config
.
下面的配置是针对,Babel、ESLint等配置使用独立的配置文件还是放到package.json中,个人认为还是独立出来比较方便。
后面有提醒是否保存相关的预设,可以保存也可以不保存。
建立成功后:
npm run serve
#另,vue项目打包生成:npm run build
运行结果可以访问:http://localhost:8081/,可以看到首页即算建立成功了。
vue还提供ui界面方式建立工程
vue ui
#自动打开浏览器:http://localhost:8000
#图形界面建立工程
浏览器里面可以看到:
图形界面,可以尝试看看。
Vue项目目录结构
可以看到文件夹下面都是index.js
,在其他地方可以使用import router from "./router"
这样的方式来引用,ES6的标准语法。
下面可以安装其他组件工具了。