如何安装vue-cli脚手架
的vue-cli已经非常清楚明白咯。你只要利用npm进行安装vue-cli，之后：
vue init webpack (这里的三个点是你的项目命名);
然后他就自动的模版引擎，后面的东西可以根据它的提示进行后续操作，启动的话也是很简单的。
启动完成就是 npm install 安装依赖完了就 npm run dev。就可以了
vue和vue-cli是什么关系
vue-cli相当于脚手架， 给你自动生成模板工程 ；vue-router是 vue路由插件， 支持你单页应用的 ；vue-loader是webpack下loader插件， 可以把.vue文件 输出成组件。
学习，是指通过阅读、听讲、思考、研究、实践等途径获得知识和技能的过程。学习分为狭义与广义两种:
狭义:通过阅读、听讲、研究、观察、理解、探索、实验、实践等手段获得知识或技能的过程，是一种使个体可以得到持续变化(知识和技能，方法与过程，情感与价值的改善和升华)的行为方式。例如通过学校教育获得知识的过程。
广义:是人在生活过程中，通过获得经验而产生的行为或行为潜能的相对持久为方式。
社会上总会出现一种很奇怪的现象，一些人嘴上埋怨着老板对他不好，工资待遇太低什么的，却忽略了自己本身就是懒懒散散，毫无价值。
自古以来，人们就会说着“因果循环”，这话真不假，你种什么因，就会得到什么果。这就是不好好学习酿成的后果，那么学习有什么重要性呢？
物以类聚人以群分，什么样水平的人，就会处在什么样的环境中。更会渐渐明白自己是什么样的能力。了解自己的能力，交到同水平的朋友，自己个人能力越高，自然朋友质量也越高。
在大多数情况下，学习越好，自身修养也会随着其提升。同样都是有钱人，暴发户摆弄钱财只会让人觉得俗，而真正有知识的人，气质就会很不一样。
高端大气的公司以及产品是万万离不了知识的，只有在知识上不输给别人，才可以在别的地方不输别人。
孩子的教育要从小抓起，家长什么样孩子很大几率会变成什么样。只有将自己的水平提升，才会教育出更好的孩子。而不是一个目光短浅的人。
因为有文化的父母会给孩子带去更多的在成长方面的的帮助，而如果孩子有一个有文化的父母，通常会在未来的道路上，生活得更好，更顺畅。
学习是非常的重要，学习的好坏最终决定朋友的质量、自身修养和后代教育等方面，所以平时在学习中要努力。
安装vue-cli一直卡在这个状态该怎么解决
-
先装一个cnpm。
-
npm install -g cnpm –registry=
-
cnpm i – g vue-cli！
vue-cli 如何使用scss
一、创建一个基于 webpack 模板的新项目
1、全局安装 vue-cli
$ npm install –global vue-cli
2、创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
3、安装依赖
$ cd my-project
$ npm install
4、为了使用sass，我们需要安装sass的依赖包
npm install –save-dev sass-loader
//sass-loader依赖于node-sass
npm install –save-dev node-sass
5、修改style标签
打开src目录下的components目录中的Hello.vue文件。
然后修改 style标签如下
《style lang=“sass“》
6、然后运行项目
npm run dev
7、终端显示错误，如下：
ERROR Failed to compile with 1 errors
error in ./src/components/Hello.vue
Module build failed:
h1, h3 {
^
Invalid CSS after “h1, h3 {“: expected “}“, was “{“
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)
错误提示：无效的css。因为sass语法不使用大括号和分号。
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。
如果你希望使用带大括号的语法，即SCSS
那么，你只要把lang=“sass“改成lang=“scss“就行了。
二、引用sass/scss 文件
举个例子 @import “./common/scss/mixin“;
千万别忘了分号，否则会报错类似的错误
Module build failed:
#app {
^
Media query expression must begin with ’(’
in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256
好了，在vue项目中使用sass就这么简单
作者：no_shower
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
怎么安装 vue-cli3
安装步骤：
1、cmd打开命令行窗口
2、输入cnpm install vue-cli -g，然后回车等待(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)
3、安装结束后输入vue 如果显示版本号继续下一步操作
4、运行vue init webpack demo(注：项目名称)回车
5、显示Project nanme 目录名 回车 project description 后面可以写上描述，或者直接回车
Author 后面可以写作者也可以回车
6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选Y
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9、Setup e2e tests with Nightwatch? 选n
10、这个时候在你创建的目录下就有你的目录了，然后cd 你的目录名进去cnpm install回车等待,这一步是安装依赖的，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件，如果这个文件夹没有那么项目是没办法跑
起来的
11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用，启动成功它会自动打开一个vue页面
12、每次这样启动是很麻烦的，用开发工具加载整个项目，里面有个package.json，它我整个项目的配置和信息的描述，里面有个scripts,这是定义的一些脚本，刚才用的就是里面的dev，它会执行后面的东西，就是用node跑一个JSON文件
13、在项目中，右击package.json选择show npm scripts,显示npm后，双击命令即可
main.js的介绍
el是挂载点，router是路由
用vue-cli创建项目显示这个是什么意思
Vue-cli是官方推荐的快速构建单页应用的脚手架。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack、npm、nodejs等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的（官方构建建议）。一下是构建过程。
一、 安装 node.js
首先需要安装node环境，可以直接到中文官网
为什么用vue cli创建项目,第一次在浏览器打开了,第二次就打不开了
检查npm版本，建议安装到最新版本。
【命令行查看版本号】node-vnpm-v【升级npm(可选操作)】npminstall-gnpm。
安装【全局安装webpack】npminstallwebpack-g。
vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题，要求是页面组件全部加载完成后再执行某个函数，给上代码参考，方法可能有点笨，好在实现了功能。
1、安装vuex
npm
install
vuex
–save
2、在项目目录下找到store.js文件
import
Vue
from
’vue’
import
Vuex
from
’vuex’
Vue.use(Vuex)
//监听nav模块加载完
const
m_classifyone
=
{
state:
{
count:0
},
mutations:
{
increment
(state)
{
state.count++
}
}
}
const
store
=
new
Vuex.Store({
modules:
{
a:
m_classifyone,
b:
m_classifyonepage,
c:currentpage
}
})
export
default
store;
3、在子组件中
created(){
//数据请求完成后
this.$post(address.addr+controll.mallcontroll+’/getMallHome’).then(message
=》
{
//这里使用箭头函数是为了不改变this指向
this.$store.commit(’increment’);
})
}
4、通过store判断子组件数据加载完成
mounted(){
//通过store判断当前组件是否加载完成，加载完成执行页面框架
var
count
=
0;
let
countfn
=
function(count){
if(count》0){
//子组件加载完成清除计时器，调用方法
clearInterval(st)
pagef.pageFramefn();
}
}
let
st
=
setInterval(e
=》
{
count
=
this.$store.state.a.count;
countfn(count)
})
//通过store判断当前组件是否加载完成，加载完成执行页面框架
}
以上这篇vue-cli监听组件加载完成的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:在vue-cli中组件通信的方法vue
父组件调用子组件方法及事件详解vuex
中的
state
在组件中如何监听vue路由组件按需加载的几种方法小结vue实现图片加载完成前的loading组件方法
如何改造vue-cli实现多页面应用
vue脚手架（vue-cli）所支持的就是尽可能的提高用户体验设计，通过路由减少页面访问次数达到页面无刷新切换。也就是单页面应用。
题主所说的“多页面应用”其实是没有什么意义的。如果强行为了实现而去实现也是可以的：
取消vue-router功能，全部换成a标签做页面跳转，不能直接a的用js 的location.href跳转，就可以实现多页面了。
vue vue-cli脚手架 要先安装哪个
一般就是这样：
本人测试vue-cli，使用的各个工具的版本，分别是node6.95、webpack3.6.0、vue2.4.4。
第一步，安装node.js。
PS：我所使用的系统是win7的64位。
PS：检测node.js是否安装成功，在命令行中输入node -v即可。
第二步，安装cnpm。点击运行，输入cmd，执行命令：$ npm install -g cnpm –registry=