Vue2.0搭建Vue脚手架(vue-cli)

一、安装node.js

进入官网下载node.js

二、安装 cnpm

1、说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

2、使用npm安装插件:命令提示符执行npm install <name>

3、选装 cnpm  因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。

安装:npm install -g cnpm --registry=https://registry.npm.taobao.org

输入cnpm -v,可以查看当前cnpm版本

三、安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

安装:$ cnpm install vue-cli –g     //g表示全局安装

安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

四、创建一个基于webpack模板的新项目 

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。可以使用:

$ vue init webpack my-app      // my-app为自定义项目名

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好

Project name (my-app) # 项目名称(我的项目)

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 run dev

运行成功后,浏览器直接显示的是页面如下:

六、安装项目所需要的依赖

刚初始化的项目是没有依赖的,如果运行会报类似这样的错误,输入命令

$ cnpm install 依赖文件名

ctrl+c 退出服务

my-app/ config/index.js

原文地址:https://www.cnblogs.com/ycg-myblog/p/10044758.html

时间: 2024-08-04 06:29:13

Vue2.0搭建Vue脚手架(vue-cli)的相关文章

Vue:Vue2.0搭建脚手架

随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https://nodejs.org/en/download/ 根据电脑操作系统,选择相应版本的文件进行下载. 2.下载文件后双击进行安装 安装完成以后进入node.js的安装目录:D:\Program Files\nodejs\(这里是我本机安装的目录,其他机器目录可能不同),你会发现里面自带了npm,直接

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue2.0 实战项目(一) ——安装vue.cli

1.打开Vue脚手架的github地址:https://github.com/vuejs/vue-cli,在README查看如何安装 2.通过npm安装vue $ npm install -g vue-cli 3.通过webpack安装 $ vue init webpack myProjectName 4.切换到创建的项目目录,然后安装依赖文件 npm install

用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({});2.实例化Vue时,需要传入一个参数(选

使用vue-cli3(vue脚手架)搭建项目时遇到的问题

vue2.x  脚手架创建项目命令是 vue init webpack '项目名称' vue3.x  脚手架创建项目命令是 vue create  '项目名称'   (要求: 环境要求vue cli要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )) 1. vue create '项目名称' (选择一些配置) 1.1 问题来了: 我不想选择默认(default), 我想选择手动的,然而(上下箭头切换 , 空格是选中)不

Vue2.0总结———vue使用过程常见的一些问题

Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使用prerender-spa-plugin插件 4.后台----开启压

vue2.0实践 —— Node + vue 实现移动官网

简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vue-awesome-swiper 插件) 新闻列表 新闻详情 职位列表 联系我们页面(使用百度地图api) 技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js

vue_使用npm搭建vue2.0脚手架开发环境

前言: 在使用vue进行开发时需要搭建vue的运行环境,这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境.主要是分为mac和window两个版本,两个环境的搭建都是大同小异. mac开发环境的搭建: 1.安装Node.js(这个只需要去nodeJS官网下载安装就可以了) 以下的命令都是在终端输入 2.在电脑终端使用命令 node -v 检查版本(检查安装成功) 3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://regist