第一步 准备工作


1.下载安装Node.js

验证是否安装的方法,在命令行输入node -v

2.安装Vue

在命令行输入npm install -g @vue/cli

查看Vue版本号 npm vue --version

如果Vue版本太低,先卸载Vue低版本  npm uninstall vue-cli -g

第二步  创建Vue项目


1. 打开要创建路径

2-1.vue CLI3版本输入vue create test创建名为test的项目

 接下来会问你一系列的问题

  Please pick a preset:(Use arrow keys)//选择使用什么样的工具,两个选项:

    1.default (babel,eslint)  //默认

    2.Manually select features  //自定义,按空格选中

  Where do you prefer placing config for Babel, PostCSS,ESLint,etc.?(Use arrow keys)  //每一个配置都生成一个配置文件还是都生成在package.json中

    1.In dedicated config files  //在专用的配置文件

    2.In package.json  //在package.json

  Save this as a preset for future projects?(y/n)  //保存刚刚选择的配置

    1.y

      Save preset as:  //保存配置的名字

    2.n

  等待安装……

  安装完成后,输入cd test进入项目文件夹中

  npm run serve启动项目

2-2.vue CLI2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

 接下来会有如下提示

  Project name(工程名):回车
  Project description(工程介绍):回车
  Author:输入作者名
  Vue build(是否安装编译器):回车
  Install vue-router(是否安装Vue路由):回车
  Use ESLint to lint your code(是否使用ESLint检查js代码):n
  Set up unit tests(安装单元测试工具):n
  Setup e2e tests with Nightwatch(是否安装端到端测试工具):n
  Should we run npm install for you after the project has been created? (recommended):回车。

第三步 启动项目


  • 进入项目目录:cd demo
  • 安装项目所需要的依赖:npm install
  • 启动项目:npm run dev

启动成功,浏览器打开:localhost:8080,即可看到vue项目。


目录结构


package.json


通过脚手架创建Vue项目的更多相关文章

  1. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  2. 基于3.X版本的脚手架创建VUE项目

    一.基于交互式命令行的方式,创建vue项目 1.命令:vue create 项目名称.项目名称必须是英文的.不要包含中文.特殊的字符和符号.在cmd中输入命令:vue create vue_proje ...

  3. vue-cli 3.0脚手架创建vue项目

    1. 卸载vue-cli 2.0 npm uninstall -g vue-cli 2. 安装vue-cli 3.0 npm install @vue/cli 3. 创建项目 npm create & ...

  4. 用脚手架创建vue项目

    .创建文件地址 首先创建一个文件夹,我用的HBuilder编辑器 , 然后把文件夹拖入编辑器 , 在你创建的文件夹里面打开cmd 2.输入安装命令 : 1). npm install --global ...

  5. vue-cli脚手架创建vue项目

    CLI 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置 cnpm install -g @vue/cli // 如果需要使用旧版本的vue init功能(脚手架2),你可以全 ...

  6. 使用脚手架创建vue项目之后会有很多警告,如何关闭它!

    依次打开build→webpack.base.conf.js文件,然后找到createLintingRule,把里面的内容选择性的删除即可,就是这么easy;

  7. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  8. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  9. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

随机推荐

  1. CSS深入理解之overflow(HTML/CSS)

    简介 overflow看上去其貌不扬,其中蕴含的知识点还是很多的,有很多鲜为人知的特性表现. overflow基本属性值 1.visible(默认) 2.hidden 3.scroll 4.auto ...

  2. 解决tableView中cell动态加载控件的重用问题

    解决tableView中cell动态加载控件的重用问题 tableView的cell,有时候需要在运行时取得对应的数据后才能够动态的创建该cell中的控件并加载到该cell中,此时,你一定会遇到重用问 ...

  3. orcl数据库查询重复数据及删除重复数据方法

    工作中,发现数据库表中有许多重复的数据,而这个时候老板需要统计表中有多少条数据时(不包含重复数据),只想说一句MMP,库中好几十万数据,肿么办,无奈只能自己在网上找语句,最终成功解救,下面是我一个实验 ...

  4. Mycat问题总结

    Mycat问题总结 一丶自增主键设置 Mycat提供了几种设置自增主键的方式 本地文件方式 数据库方式 服务器时间戳方式 分布式ZK-ID生成器 第一种和第二种只适合单点设置,对于集群不适用.第四种方 ...

  5. Sharepoint 2013 多服务器域的目录服务器和搜索服务的配置

    一般而言,大部分的sharepoint的管理工作均可以通过Centrlal Admin完成,可惜这个操作不得不要用powershell. 假如Webfront服务器叫 WebServer 目录服务器叫 ...

  6. ZT Android 4.2 BT系统之蓝牙关闭过程全跟踪

    Android 4.2 BT系统之蓝牙关闭过程全跟踪 分类: android 2013-08-03 00:34 2252人阅读 评论(10) 收藏 举报 代码位置:       frameworks/ ...

  7. [转载并收藏]JavaScript 疲劳终极指南:我们行业的真相

    这篇文章说的深得我心,特别是前半段. 特此收藏. 中文译文:http://www.zcfy.cc/article/the-ultimate-guide-to-javascript-fatigue-re ...

  8. IO多路复用(select)

    select在操作系统内部,维护了一个for循环,检测对象是否变化.select在各种平台都可使用,但效率不高.select对监听的个数是有限制的(1024) poll与select相同,但是没有监听 ...

  9. ubuntu常见问题排查

    1. ubuntu recovery mode read-only 获取写的权限 1.1. 选择fsck check all file systems 进去直接选择YES就可以了 1.2. 选择roo ...

  10. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...