米鼠商城

多快好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

Vue-Cli脚手架安装(项目创建)详解

  • xuxiang
  • 7
  • 2020-03-26 11:20

Vue-Cli 脚手架

  • 脚手架:帮助我们把webpack等相关配置都处理好,开箱即用,脚手架好比工具,我们只需要基于脚手架快速构建一个项目即可
  • 参考网址: https://cli.vuejs.org/zh/
  • 安装:下载Vue-Cli脚手架,一般安装在全局(-g)
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
  • 安装完成后全局环境下会生成一个 vue的可执行命令, vue --version 或者 vue -V查看版本号

一.脚手架的创建,配置,使用

     一.创建项目

            vue create 文件夹名(项目名)

            

    二.配置

           

  1. 第一项为曾经的配置好的选项,保留下来的,如果第一次创建没有保存,只有default 和 Manually选项 
  2. 第二项default为默认设置,最基本的配置,包含了babel和eslint,推荐手动配置
  3. 第三项为手动选择,可以手动选择自己需要的高级配置(因为前两项回车就可以完成配置,所以下面只展示第三项手动选择)

 三.手动配置

    

键盘,上下箭头选择,空格选中和不选中,选好回车键继续,

Bable(必选) 表示可以使用es6,es7语法等,

TypeScript 暂时不选,有需要可选

PWA 不选,chrome的一个离线程序

Router (必选) 路由

Vuex (必选) 

CSS pre-processors (必选) css处理器 sass less 不用就不选

Linter(必选) 代码格式化,规划

Unit 和 E2E 不选 测试用的

选好回车继续

 四.选择css预处理语言

可以默认选第一个 sass/scss

五.选择代码风格和格式校验

一般选择第三个,标准代码格式,回车继续

六.代码检查

第一个选项,代码一保存就检查,

第二个选项,代码提交的时候修复,建议都选

七.配置文件

第一个选项:保存到一个默认文件

第二个选项:保存到package.json文件  这里选择第一个

八.是否保存配置

需要保存 就给yes  然后给一个名字

不需要保存就no

然后回车,就会自动安装配置

九.创建完成启动项目

先cd 进入项目目录,然后npm run serve 启动,会生成如下图

然后浏览器打开 localhost:8080 这个地址,就能看到一个hello world 的页面

十.在本地查看,如下图

到这里,Vue-Cli脚手架,搭建项目就完成了



城市合伙人全球招募中:400-150-9800

参与线下宏伟蓝图,用业绩说话!
软件线索、软件需求,米鼠网帮你变现!
更灵活的合作模式(不限地域、不限金额、不限项目)
更高额的提成比例(提成是软件项目利润的80%)
利润的核算方式:
以平台公开招标的最低价中标价格为基准,剩下的为利润部分,如对平台的最低中标价格有异议,可以推荐供应商进行竞标。
义务:
1、作为城市合伙人,在该城市利用自身优势推广“米鼠网平台”,拓展甲 方所拥有的“米鼠网平台”实名认证用户和 VIP 用户
2、作为城市合伙人,在该城市利用自身优势推广“米鼠网商城”,并寻求该地域软件产品销售商,促成软件产品销售商委托甲方在“米鼠网商城”上代理销售软件产品销售商的软件产品的交易,并拓展软件产品采购用户促成与甲方的采购交易。



如有侵权请联系邮箱(service@misuland.com)

猜你喜欢

评论留言