Vue-cli 本地安装vue项目

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

步骤:

npm yarn很慢_npm yarn很慢

 

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

npm yarn很慢_git_02

2.初始化一下

npm yarn很慢_VPN_03



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




npm yarn很慢_npm yarn很慢_04

3.再安装依赖 npm install

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

npm yarn很慢_npm yarn很慢_05

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

npm yarn很慢_npm yarn很慢_06

5.运行 npm run dev

npm yarn很慢_VPN_07

6.项目编译 npm run build

npm yarn很慢_Vue_08

 

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

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

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

npm yarn很慢_VPN_09



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 yarn很慢_VPN_10

官网的解释:

npm yarn很慢_Vue_11

 

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

npm yarn很慢_npm yarn很慢_12

 



打开index显示空白的问题:



明明build成功,却提示这样的问题被忽略了




npm yarn很慢_Vue_13

在浏览器打开,调试模式下还会提示404找不到页面



 解决办法:



找到config文件夹下的index.js文件




npm yarn很慢_VPN_14

 



'/'修改为'./'




npm yarn很慢_VPN_15

  ———————》


npm yarn很慢_VPN_16

 


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


npm yarn很慢_Vue_17

npm yarn很慢_Vue_18

 


 


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