vue的脚手架模板创建流程(vue-cli):

步骤一:

$ cnpm install vue   -g       //全局安装vue

步骤二:

$ cnpm install --global vue-cli          //全局安装vue-cli脚手架

步骤三:

如上图,使用vue init webpack-simple vue(此vue为项目名)创建名为vue且模板为webpack-simple的项目,并一直按回车。

注意点1:vue-cli脚手架中有3种模板,分别是simple、webpack-simple和webpack模板,三者的区别如下:

1)simple模板较简单,意义不大;

2)webpack-simple模板没有过强的js语法检测(推荐使用);

3)webpack模板含有较强的语法检测,使用起来比较繁琐。

此处创建的是webpack-simple模板。

注意点2:项目名不可以含有大写字母,比如vue init webpack-simple vueDemo 中的项目名vueDemo含有大写字母,那么此命令回车后的Project  name改为vue-demo这样不含大写字母的名字即可。

步骤四:

$ cd vue      //进入项目名为vue的项目中

步骤五:

$ cnpm i     //安装vue项目中的依赖包

步骤六:

$ npm run dev      //启动项目

见到如下图,就说明你的vue项目就启动成功啦~

时间: 2024-10-02 22:34:03

vue的脚手架模板创建流程(vue-cli):的相关文章

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 四.JS原型 五.vue组件生命周期钩子 六.vue的ajax插件:axios 七.vu

vue+node+es6+webpack创建简单vue的demo

闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助. 前期准备: 1.安装node 安装包地址这个里面有两个安装包大家可以根据自己的需求选择安装4.4.4版本或者6.2.0版本,小颖选择的是6.2.0. 2.Atom编辑器,这个大家可以根据自己的喜好选择自己喜欢的编辑器,所以小颖就不发下载链接了,大家有需求的话可以百度下嘻嘻. 目录: 创建项目:

在vscode中创建vue的html模板

为什么要创建模板? 刚开始学习vue的时候通常是在html中写的vue.而非直接在.vue文件中写.这个时候vscode中并没有直接提供vue的模板,我们需要使用snippet直接生成模板,就像生成html模板一样. 如何生成模板? 通过ctrl+alt+P 通过关键字Preference 找到配置用户代码块. 设置局部代码块,即选择html回车. 在html.json中填充你喜欢的模板即可. 个人使用的模板 类似黑马的vh模板: "vh": { "prefix":

vs code vue模板创建

摆图 其他模板创建,依照此法即可.

Vue搭建脚手架2

基于vue-cli快速构建 注:本文引用于 http://www.jianshu.com/p/2769efeaa10a Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端,做过Vue,了解了一下React,听说过Angluar.我只能这么说,我来晚了,没经历所有.闲话少说进入正题. Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈

438 vuex:基本使用,传参,vue和vuex的配合使用,Vue脚手架3,使用Vuex改版 TodoMVC,actions,mapGetters,mapMutations,mapActions

一 .Vuex的介绍 vuex 是什么? 状态管理工具 状态:即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具, 采用了 集中式 方式统一管理项目中组件之间需要通讯的数据 [共享的数据.] [看图] 如何使用 最佳实践 : 只将组件之间共享的数据放在 vuex 中, 而不是将所有的数据都放在 vuex 中 也就是说: 如果数据只是在组件内部使用的, 这个数据应该放在组件中, 而不要放在 vuex vuex 中的数据也是 响应式 的, 也就是说: 如果一个组件中修改了 v

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项: 1.首先,要安装node.js,之后第一步检测是否安装node:没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本,如果有说明安装成功. 2.之后全局安装vue-cli脚手架 电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g 注意:npm -v 3.0+   npm版本需要在3.0之

VUE:项目的创建、编写、打包及规范检查

VUE:项目的创建.编写及打包 项目的创建 使用 vue-cli 创建模板项目(官方提供的脚手架工具) https://github.com/vuejs/vue-cli npm install -g vue-cli vue init webpack vue_demo cd vue_demo npm install npm run dev 访问:http://localhost:8080/ 第一个命令需要有npm.可以使用node -v查看是否已经安装,如没有可用下面的传送门 npm是什么及其安装