通过脚手架创建Vue项目
第一步 准备工作
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项目的更多相关文章
- 使用vue-cli脚手架创建vue项目
使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...
- 基于3.X版本的脚手架创建VUE项目
一.基于交互式命令行的方式,创建vue项目 1.命令:vue create 项目名称.项目名称必须是英文的.不要包含中文.特殊的字符和符号.在cmd中输入命令:vue create vue_proje ...
- 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 & ...
- 用脚手架创建vue项目
.创建文件地址 首先创建一个文件夹,我用的HBuilder编辑器 , 然后把文件夹拖入编辑器 , 在你创建的文件夹里面打开cmd 2.输入安装命令 : 1). npm install --global ...
- vue-cli脚手架创建vue项目
CLI 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置 cnpm install -g @vue/cli // 如果需要使用旧版本的vue init功能(脚手架2),你可以全 ...
- 使用脚手架创建vue项目之后会有很多警告,如何关闭它!
依次打开build→webpack.base.conf.js文件,然后找到createLintingRule,把里面的内容选择性的删除即可,就是这么easy;
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- Vue2+Webpack创建vue项目
相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...
随机推荐
- Android ListView的XML属性
1.ListView的XML属性 android:divider //在列表条目之间显示的drawable或color android:dividerHeight //用来指定divider的高度 a ...
- Android8.0适配那点事(一)
最近有小伙伴说,7.0适配整了一波,现在又要来适配8.0,真是一波未平一波又起 但是作为开发者来说,学无止境,不跟上时代的步伐,肯定会被时代所淘汰... 话说Android P已经在路上了,你准备好了 ...
- MySQL 、SQL MS Access、和 SQL Server 数据类型
MySQL 数据类型 在 MySQL 中,有三种主要的类型:Text(文本).Number(数字)和 Date/Time(日期/时间)类型. Text 类型: 数据类型 描述 CHAR(size) 保 ...
- Sql Server中的谓词和运算符
谓词和运算符配合使用是我们得到理想数据的最佳途径. 一.浅谈谓词 谓词的概念:一个运算结果为True.False或Unknown的逻辑表达式.它的运用范围有:where子句.Having子句.Chec ...
- js 时间日期函数小结
Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month &quo ...
- jenkins 安卓打包生成二维码下载
先来张图看看吧 构思 jenkins gradle 打包apk文件,python myqr 模块生成二维码 放入nginx 访问图片的路径,apk安装包放在 nginx 下载目录. 环境 centos ...
- 全局变量是列表list 的改变, 竟然在局部,用append 就可以了..... 不用global sth...
lst = ["麻花藤", "刘嘉玲", "詹姆斯"]def func(): lst.append("⻢云云") # 对 ...
- 2018.08.31 10:57 swift 学习心得
其实我一直很喜欢swift,我觉得Xcode很先进,买了一台MacBook就可以操作了,蛮好的. var str = "Hello, playground" var myVaria ...
- session过期,拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
- HDU1407 测试你是否和LTC水平一样高
题目大意:给出一个num,计算方程x^2+y^2+z^2 = num的第一个正整数解(字典序),0 < num <= 10000. 方法参考了网上的博客,自己打了一波,发现还有很多不懂的地 ...