Vue开篇之Vue-cli搭建项目
介绍
Vue.js是一套构建用户界面的渐进式框架。
Vue 只关注视图层,采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
第一步:安装node.js
从node.js官网下载并安装node,安装步骤就是一路点next即可~
安装完成后输入cmd打开命令行工具输入命令node -v,出现版本号说明node安装成功啦。
后面我们安装其他依赖时都要通过npm进行安装,但是由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。
安装cnpm
在命令行输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
接下来等待安装即可~
安装完成后输入cnpm-v查看版本:
以后的npm写法可以用cnpm代替了。
第二步:安装vue
cnpm install vue
安装vue-cli脚手架
#全局安装
cnpm install -g vue-cli
创建一个基于 webpack 模板的新项目
#my-project为自定义项目名
$ vue init webpack my-project
运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,其中我把ESLint、tests、e2s都设为n,即不想用到这些,其他全部为y。
Project name (my-project) # 项目名称(我的项目) Project description (A Vue.js project) # 项目描述一个Vue.js 项目 Author 作者(你的名字) Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块) Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ]) Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键) Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N) Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
需要注意的是项目名字不能大写~
安装依赖
初始化的项目是没有依赖的,直接运行会报错,所以得先安装依赖:
cnpm install
接下来运行:
cnpm run dev
或者这样也行:
cnpm start
运行完之后出现这个页面说明已经脚手架搭建成功啦。
Vue开篇之Vue-cli搭建项目的更多相关文章
- vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...
- vue cli搭建项目
1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
首先,默认咱们已经有了.net core 3.1的开发环境,如果你没有,快去下载... https://dotnet.microsoft.com/download 由于项目是基于abp vNext开发 ...
- mvn cli 搭建项目架构
创建如图所示目录结构 在system-parent创建如下目录 ├─system-dao ├─system-domain ├─system-service └─system-web 创建system- ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- 不使用 vue-cli 与 vue 模版,使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架
说明 这是我根据慕课网上的一个课程 Vue+Webpack打造todo应用 过程一步步搭下来的框架,去掉了业务相关的逻辑. 项目最终的效果包括了引入vue框架:使用CSS预处理器:使用babel:引用 ...
- 搭建项目vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize
vue + vue-router + vuex + vue-i18n + element-ui + egg + sequelize https://www.cnblogs.com/wuguanglin ...
随机推荐
- python—文件处理
一.文件处理流程 1.打开文件,得到文件句柄并赋值 2.通过句柄对文件进行操作 3.关闭文件 二.文件打开模式 1.r,只读,默认模式 2.w,只写 3.a,追加 4. r+.w+.x+.a+ ,可读 ...
- 配置 RIPv1 和 RIPv2
拓扑图 场景您是公司的网络管理员.您所管理的小型网络中包含三台路由器,并规划了五个网络.您需要在网络中配置RIP路由协议来实现路由信息的相互传输.最初使用的是RIPv1,后来发现RIPv2更有优势,于 ...
- PTA第二次作业
pta 6-7题 删除字符串中数字字符 1.设计思路 (1)第一步:观察题意了解各个参数与所需函数在题目中的意义: 第二步:设计算法编写函数,让函数的功能实现题目中所需的功能: 第三步:运行程序检测是 ...
- MS-UAP发布的UWP的个人隐私策略
我们十分重视您的隐私.本隐私声明解释了我们从您那里收集的个人数据内容以及我们将如何使用这些数据. 我们不收集任何与个人信息相关的数据,只收集与本UWP运行相关的数据,如: 产品使用数据:如每个页面的使 ...
- 1.4 The usage of plug-in
Once upon a time, we once thought naively that Android plug-in was intended to add new features or a ...
- 七种经典排序算法及Java实现
排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...
- Python内置函数(38)——list
英文文档: class list([iterable]) Rather than being a function, list is actually a mutable sequence type, ...
- shell的exec命令
工作中遇到运维人员挂supervisor的时候建议启动使用命令control.sh start, 并且在control.sh 里面启动命令: exec -c ./bin/xxx -f config/x ...
- Javascript的原型继承,说清楚
一直以来对Javascript的原型.原型链.继承等东西都只是会用和了解,但没有深入去理解这门语言关于继承这方面的本质和特点.闲暇之余做的理解和总结,欢迎各位朋友一起讨论. 本文本主要从两段代码的区别 ...
- JDK1.8源码(三)——java.util.HashMap
什么是哈希表? 在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 数组:采用一段连续的存储单元来存储数据.对于指定下标的查找,时间复杂度为O(1):通过给定值进行查找, ...