vue-cli使用说明
一、安装
npm install -g vue-cli
推荐使用国内镜像 先设置cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
二、项目生成
首先需要在命令行中进入到项目目录,然后输入:
vue init webpack 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 文件夹放到服务器就行了。
最新文章
- Go - 项目收藏
- CodeForces 514B
- POJ 1113:Wall
- JAVA设计模式之模版方法模式
- 安卓App和java通信实例
- C#设计模式——代理模式(Proxy Pattern)
- htm Dom对象与 Xml Dom对象的理解
- jsp+servlet+jquery 用jquery uploadify最新版本实现多文件上传
- vertical-align 与 line-height 傻傻分不清??
- SQL Server Alwayson配置两个节点加共享文件夹仲裁见证
- Unable to instantiate Action, MenuAction, defined for 'QueryMenuAll' in namespace '/'MenuAction
- .NET Core 2.1来了!
- linux安装redis操作
- dos2unix 批量转化文件
- leetcode416
- POJ 2503 Babelfish (STL)
- 最简单的DHCP服务
- hdu 5651 xiaoxin juju needs help 逆元 两种求解方式
- centos 7下ldap安装
- BZOJ4807:車(组合数学,高精度)
热门文章
- Hbase的安装和配置
- Qt多线程-QtConcurrent并行运算高级API
- js动态显示指定的时间
- Struts按着配置文件的加载的顺序,后面文件和前面文件相同的配置,后面的会把前面的文件的值覆盖
- LR安装No Background bmp defined in section General entry BGBmp的解决办法
- http://www.pythonchallenge.com/ 网站题解
- P4622 [COCI2012-2013#6] JEDAN
- CodeForces - 955B(用char会超时。。。)
- poj 1945 Power Hungry Cows A*
- 【learning】加权拟阵与贪心