Vue.js入门 - 安装
Vue.js入门系列,安装教程
说明:由于本人使用Mac,下文中步骤对于windows可能无效,请自行参见官方教程。
官网:http://vuejs.org/
教程(中文):http://cn.vuejs.org/v2/guide/installation.html
引用于官网
在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browserify模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。
Vue.js提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目
下面我们使用命令行工具进行创建。
1. Node版本
需要Node版本在4.0.0以上。若有权限问题请在命令前加sudo
[1] 查看版本
node -v
[2] 安装一个叫n的模块
npm install -g n
[3] 升级
n stable
2. 安装cnpm替换npm(可选)
在国内使用npm下载很慢,推荐使用淘宝的npm镜像,安装cnpm,以后在使用npm的地方替换成cnpm就可以了。
淘宝镜像地址:https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安装 vue-cli
npm install --global vue-cli
4. 创建一个基于 webpack 模板的新项目
vue init webpack my-project
注意:my-project是项目名称,可以自定义
? Project name my-project
? Project description An example to introduce vuejs
? Author joyce
? Vue build standalone
? Install vue-router? Yes
//-语法检查工具-
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
5. 安装依赖
进入创建的工程目录(需和上述可自定义的项目名称一致)进行安装
cd my-project
npm install
可以在项目目录里直接安装,是因为有package.json这个文件,里面包含了需要安装的包的名称。安装完成后,可以在目录中发现多出了node_modules这个文件夹,里面为下载的依赖。
6. 运行
npm run dev
在上述的package.json中有”dev”: “node build/dev-server.js”,实际运行的是这个js,默认是在8080端口。
更多推荐
所有评论(0)