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】。

Vue项目基础环境

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

Vue项目基础环境

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

例如:

history模式:server:port/route/path

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

Vue项目基础环境

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

Vue项目基础环境

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

Vue项目基础环境

Vue项目基础环境

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

Vue项目基础环境

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

建立成功后:

npm run serve
#另,vue项目打包生成:npm run build

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

Vue项目基础环境

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

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

浏览器里面可以看到:

Vue项目基础环境

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

Vue项目目录结构

Vue项目基础环境

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

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

给TA打赏
共{{data.count}}人
人已打赏
运维

安装Vagrant

2024-11-19 10:36:12

运维

Vue项目ElementUI集成

2024-11-19 10:36:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索