Vue.js:使用vue-cli快速构建项目
2016-12-13 15:46
1181 查看
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。
vue-cli怎么使用?
安装vue-cli之前,需要先安装了vue和webpack,不知道怎么安装的可以看我之前的文章《Vue
+ Webpack 实现SPA应用文档》
安装vue-cli
npm install -g vue-cli //全局安装vue-cli
vue init webpack projectName //生成项目名为projectName的模板,这里的项目名projectName随你自己写
cd projectName
npm install //初始化安装依赖
这样子项目就安装完了。生成的项目下面的目录是这样的
然后执行
npm run dev
在浏览器打开http://localhost:8080,则可以看到欢迎页了。
但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?此时需要执行
npm run build
会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。
进入config/index.js
原来的配置的引用路径为
我自己更改为
这样就能正常访问了。
相关文章推荐
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- vue学习笔记-使用vue-cli脚手架快速创建vue项目工程
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- 使用 vue-cli + element-ui 快速搭建项目
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- vue-cli构建项目使用 less的方法
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- 使用vue-cli构建的项目不检查分号
- vue-cli的使用(快速搭建项目)
- vue-cli快速构建项目以及引入bootstrap、jq
- vue-cli快速构建Vue项目
- 使用 vue-cli 可以快速创建 vue 项目
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- vue-cli构建项目使用 less
- vue.js学习10之动手使用vue-cli搭建项目及生成的代码进行修改练手
- vue-cli 构建的项目中如何使用 Less
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- 从零开始-使用React+Webpack+Nodejs+Express快速构建项目