龙行博客

从零开始搭建vue-cli脚手架_超详细步骤

都说vue2简单易上手,挣扎过一段时间没去研究(原因吗嘛:主要是觉得对于我这种前端菜鸡,有点难)

挣扎了一两周,这里翻翻,那里看看,google,百度,官网, -----  一不小心零零碎碎的还来了兴趣(想研究的东西只要来了兴趣,事半功倍);

学习使我开心(哈哈)

之前也看了看vue基础,没想想中那么难,入门像我这种菜鸡大概一天左右吧. 发现vue的官方文档还是不错的,由浅到深,如果不使用构建工具用着确实挺爽,但是实际项目中这是很难的 . 但是当你用vue-cli构建的时候,官方文档根本不够用,需要熟练掌握ES6, webpack的配置又让你感到心如刀割难受啊

当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

安装vue-cli之前请先确认你安装了node.js,版本一般都是8.0以上

node官方网站

如上:根据自己环境安装即可;

node -v 查看node版本
npm -v 查看npm版本

国内很多人用cnpm 淘宝镜像,也可以速度快 : 

这是淘宝镜像网址:  https://npm.taobao.org/

安装方法:

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

查看cnpm版本  :  如下图 我的版本是6.1的

    cnpm -v

接下来安装webpack

npm install webpack-cli -g

如下图:

同样的可以  webpack -v 查看版本号

然后安装vue-cli脚手架

安装方法：全局安装，随便一个文件夹，输入命令行：

npm install vue-cli -g

等待安装就成 查看版本号 vue -V(注意是大写)

通过vue-cli初始化项目

以上几步环境和脚手架都建好了,接下来初始化vue项目(哪个文件位置都行)

vue init webpack vuetest(项目名) 

  //此命令表示基于webpack初始化一个项目此文件生成你当前文件目录

注意:项目名只能小写不能有中文

执行安装后有选项,如下根据自己选择就行

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令

? Target directory exists. Continue? (Y/n) y---------------------找到了vuetext1这个目录是否要继续

? Target directory exists. Continue? Yes

? Project name (vuetext1)---------------------项目的名称（默认是文件夹的名称），ps：项目的名称不能有大写，不能有中文，否则会报错

? Project name vuetext1

? Project description (A Vue.js project)---------------------项目描述，可以自己写

? Project description A Vue.js project

? Author (OBKoro1)---------------------项目创建者

? Author OBKoro1

? Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），使用默认即可

? Vue build standalone

? Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".

To get started:)--------------------如何开始

cd vuetext1)--------------------进入你安装的项目

npm install)--------------------安装项目依赖

npm run dev)--------------------运行项目

Documentation can be found at https://vuejs-templates.github.io/webpack)--------------------vue-cli官方文档

现在vue项目已经初始化完成,但是还不能运行,进入你的项目里面打开cmd或者bash
前面安装的时候已经生成了package.json文件

执行npm install 安装所需依赖  否则项目是不能正常运行的

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以使用ctrl+c来中断运行。

运行后默认打开浏览器如下安装成功