码迷,mamicode.com
首页 > 其他好文 > 详细

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

时间:2017-08-30 11:08:14      阅读:1856      评论:0      收藏:0      [点我收藏+]

标签:预览   es6   log   alt   步骤   模式   配置文件   ati   错误   

Vue-cli 本地安装vue项目

需要安装node.js,用node命令行npm的方式安装Vue

步骤:

技术分享

 

1.进入项目地址安装 npm install vue-cli -g

技术分享

2.初始化一下

技术分享

ESlink e2e等是测试工具,经常会报一些vue语法等错误,有时会比较麻烦,可以关闭
技术分享

3.再安装依赖 npm install

npm安装建议挂VPN,不然很慢而且容易出错,不能挂VPN的话可以用cnpm的方式安装国内镜像

技术分享

4.安装成功直接打开了首页

技术分享

5.运行 npm run dev

技术分享

6.项目编译 npm run build

技术分享

 

编译好的文件可以直接部署到服务器,也可以直接预览使用==》npm run build 的项目无法展示问题在最后面

 接下来可以进行开发了 |||

先来看一下下载好的文件目录结构:

技术分享

bulid和config是 webpck配置相关
node_modules文件夹:是npm install安装的依赖代码库
src文件夹:存放源码,开发大部分是在src目录下的
index.html是项目的入口,入口js是main.js
static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。
.babelrc:把es6文件编译成es5
.editorconfig:编辑器的配置
.eslintignore 忽略语法检查的目录文件
就是忽略对build/*.js和config/*.js的语法检查
.eslintrc.js  eslint的配置文件
package.json对项目的描述
test是测试目录,可以不需要(建议可以看一下)
 
src开发目录:
pages目录存放我们的页面
component目录存放组件
组件和页面其实是一样的文件类型,只是由于功能不一样
router 目录存放路由

 技术分享

官网的解释:

技术分享

 

 npm run build编译之后会多出一个dist文件夹,就是编译后生成的文件

技术分享

 

打开index显示空白的问题:
明明build成功,却提示这样的问题被忽略了
技术分享
在浏览器打开,调试模式下还会提示404找不到页面

 解决办法:

找到config文件夹下的index.js文件
技术分享

 

修改其中的路径为相对路径即可
‘/‘修改为‘./‘
技术分享  ———————》技术分享

 

再将build.js文件中的黄色提示字注释掉(可以不注释)
技术分享

技术分享

 

 

最后再npm run build 一次就可以正常查看项目了
 

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

标签:预览   es6   log   alt   步骤   模式   配置文件   ati   错误   

原文地址:http://www.cnblogs.com/calamus/p/7451752.html

(0)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!