vue学习之一：下载vue-cli项目 - 草灯的专栏 - CSDN博客
vue学习之一：下载vue-cli项目
& & & & 这几周一直辗转在vue官网和各大博客搜索关于vue项目实战的例子。学的实在是零零碎碎的。不过总算在对于vue项目搭建有个基本认知，于是直接拿起以前做过的项目进行改版了，接下来是从怎么搭建vue2.x+vue-router项目实战写的一些列文章。我的开发环境都是基于win8电脑系统构建的
& & & & 针对开篇前，笔者有话说，首先要直接使用官方提供的webpack项目实例需要掌握的几个知识点：
1、vue基础教程：指令属性，条件与渲染，事件监听，class和style动态绑定，组件【重中之重】...
2、vue-route路由机制：了解怎么配置一个基础企业站点足够了
3、es6语法：.vue组件都是通过es6语法来创建
4、webpack...好吧，老实说，这个我只是基础的过了一遍，要想深入了解vue-cli打包机制，这个是很有必要去学习的
首先，我们需要安装nodejs工具，我是直接从官网下载msi文件安装，还未安装的，
然后，打开官网教程安装目录，拉动滚动条到达“命令行工具-CLI”目录：，根据官网提供的步骤做起。这里我使用的是Git Bash工具，当然你也可以使用系统自带的cmd工具。
1、npm install vue-cli -g &//全局安装vue-cli命令行工具，这个我已经安装过，这里不再截图演示
2、vue init webpack myProject &//创建基于webpack模板的新项目【注意，这里项目名称myProject不能有横杠否则要报错的】
这里注意下，vue build版本一般是默认的，直接enter，然后什么单元测试，eslint检查，统统直接不要，只要一个vue-router路由。
3、cd myProject &//进入到刚刚下载的项目
4、npm install &//安装插件依赖，安装完后会在项目下面发现生成了一个node_modules文件目录。vue组件编译，es6语法编译，css语法编译...都会使用到
5、npm run dev &//运行项目，开始你的开发里程
& & & & 最终显示这个页面就证明我们已经完整下载官网提供的webpack模板项目了。不要问我为什么端口不是8080，要跑多个项目，当然是去配置文件改端口号啦啦啦~
我的热门文章Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli） - 简书
Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
ps: 想了解更多vue相关知识请点击
Vue作为前端三大框架之一截至到目前在上以收获44,873颗星，足以说明其以悄然成为主流。16年10月Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。。。废话不多说了，把我踩过的坑，在这里跟大家说说，希望对初学者有所帮助。ps：高手请绕道。
说明：此文章参考了网上一些前人的技术分享，自己拿过来总结一下。此文章是基于webpack构建的vue项目，并实现简单的单页面应用。其中利用到的相关技术会简单加以说明
一、那么我们就从最简单的环境搭建开始：
安装node.js，从下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。
这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。
安装淘宝镜像，打开命令行工具，把这个（npm install -g cnpm --registry= ）复制（这里要手动复制就是用鼠标右键那个，具体为啥不多解释），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。
安装webpack，打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。
安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入
vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。
二、通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径
②如果以安装git的，在相关目录右键选择Git Bash Here
安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。
$ vue init webpack exprice
---------------------
这个是那个安装vue脚手架的命令This will install Vue 2.x version of the template.
---------------------这里说明将要创建一个vue 2.x版本的项目For Vue 1.x use: vue init webpack#1.0 exprice? Project name (exprice)
---------------------项目名称? Project name exprice? Project description (A Vue.js project)
---------------------项目描述? Project description A Vue.js project? Author Datura
--------------------- 项目创建者? Author Datura? Vue build (Use arrow keys)? Vue build standalone? Install vue-router? (Y/n)
--------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）? 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)? Setup e2e tests with Nightwatch? Yesvue-cli · Generated "exprice".To get started:
--------------------- 这里说明如何启动这个服务cd expricenpm installnpm run dev如下图：
cd 命令进入创建的工程目录，首先cd exprice（这里是自己建工程的名字）；
安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。创建完成的“exprice”目录如下：
下面我简单的说明下各个目录都是干嘛的：
启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：
注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。
至此简单的一个项目构建完毕....后面我将继续利用这个构建的项目写一个简单的单页面应用。看到这里给大家推荐一个ide用Atom然后安装vue插件即可，非常之好用通过vue-cli生成项目时报错解决 - 简书
通过vue-cli生成项目时报错解决
全局安装 vue-cli$ npm install -g vue-cli
创建一个基于 "webpack" 模板的新项目$ vue init webpack my-project
在执行vue init webpack my-project时遇到一个错误：
$ vue init webpack my-project/usr/local/lib/node_modules/vue-cli/node_modules/metalsmith/lib/index.js:190Metalsmith.prototype.build = unyield(function(){^SyntaxError: Unexpected token
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.&anonymous& (/usr/local/lib/node_modules/vue-cli/node_modules/metalsmith/index.js:6:18)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
百度上找了一会答案，无果，遂重新安装vue-cli，然后注意到执行$ npm install -g vue-cli时有一段警告：
npm WARN engine vue-cli@2.3.1: wanted: {"node":"&=4.0.0"} (current: {"node":"0.12.7","npm":"2.12.1"})
可能是node版本的问题，于是升级node版本：npm install -g n
再次执行$ vue init webpack my-project，成功生成项目！
参考资料：1、2、问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
一直停留在55/57这里，卡住了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
ctrl+c 重来 然后cnpm install
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：
一、 安装 node.js
首先需要安装node环境，可以直接到中文官网下载安装包。
只是这样安装的 node 是固定版本的，如果需要多版本的 node，可以使用 nvm 安装
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
二、安装 vue-cli
安装好了 node，我们可以直接全局安装 vue-cli：
npm install -g vue-cli
但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本
三、生成项目
首先需要在命令行中进入到项目目录，然后输入：
vue init webpack Vue-Project
其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板
Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖
cnpm install
然后启动项目
npm run dev
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config&index.js
建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后，可以输入 npm run build 来进行打包工作
npm run build
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。
阅读(...) 评论()