Windows安装Vue.js

我经过了一下午的搜集和查阅，整合如下，请珍惜原创的劳动成果。
明确步骤
1.安装Node.js(点击下载Node.js安装包)
2.安装vue-cli脚手架构建工具 cmd中输入npm install -g vue-cli
3.安装cnpm cmd中输入npm install -g cnpm –registry=http://registry.npm.taobao.org(淘宝提供的镜像，因为npm在国内访问速度比较慢,点击了解淘宝镜像)
4.创建项目，初始化命令
5.运行命令npm run dev
6.查看运行结果
详解如下

1.安装Node.js
我在这里选的是D盘Nodejs文件夹(选择的路径仅供参考,Win10系统装C盘可能下方操作权限不足)
参考路径
同意后一直next直至安装完成;
在cmd中输入node -v 会显示node当前版本信息
输入npm -v 会显示npm当前版本信息
表示安装ok
安装OK！

1.直接粘贴运行（因为我这里重复安装了一遍所以就updated）
npm install -g cnpm –registry=http://registry.npm.taobao.org
完成后继续
npm install -g vue-cli

输入Vue,安装成功图如下

默认安装路径在C:\Users\Administrator\AppData\Roaming\npm
默认是电脑自动配置好环境变量
若没有自动配置则
打开我的电脑–>右键属性–>高级系统设置–>环境变量–>Path–>添加获得npm的位置，保存，重新打开cmd命令工具
高级选项

找到Path
配置Path
创建项目
这里我创建的是在桌面上,MyVue是项目名
cd desktop→vue init webpack MyVue

输入cnpn install，安装依赖包

完成后
npm run dev热加载方式运行项目
加载完成
结束后打开浏览器
localhost:8080

创建第一个Vue实例

这里选的是我的D盘的firstvue文件夹(之前在D盘已将新建了一个firstvue文件夹)
1.npm init自动创建一个package.json文件（初始化项目,然后安装Vue,杠杠save,这里可能看的就是一个杠）
2.cnpm install vue –save自动在package.json文件中写入了一段内容
3.cnpm install vue-resource –save自动创建一个node_modules文件夹，内部包含vue.min.js和vue-resource.min.js文件,可直接引用
创建第一个Vue项目
内容
文件内容
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-resource/dist/vue-resource.min.js"></script>
fvue.js中是

  el: '#app',
  data: {
    message:'Hello Vue!'
  }
})

结果

接下来参照Vue官网学习即可：Vue官网

Tips:这是个简单的参照，希望能帮助Vue初学者们。

创建第一个Vue实例

猜你喜欢