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

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

这个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的标准语法。

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇