Vue快速起步

一、设置npm国内镜像源

设置命令

npm config set registry https://registry.npm.taobao.org

验证命令

npm config get registry

 

 

 

记录错误：Vue执行npm run dev 报错：missing script:dev

原因一：这是因为package.json中丢失了dev

输入指令：vue init webpack -g

 

 

原因二：webpack-dev-server版本不一样

HBuilder构建的时候，版本太低了，删除node_modules；重新下载

 

vue项目目录

 

1、build：构建脚本目录

　　1.1 build.js  ==> 生产环境构建脚本；

　　1.2 check-versions.js  ==> 检查npm，node.js版本；

　　1.3 utils.js ==> 构建相关工具方法；

　　1.4 vue-loader.conf.js ==> 配置了css加载器以及变异css之后自动添加前缀；

　　1.5 webpack.base.conf.js ==> webpack基本配置；

　　1.6 webpack.dev.conf.js ==> webpack开发环境配置；

　　1.7 webpack.prod.conf.js  ==> webpack生产环境配置；

2、config：项目配置

　　2.1 dev.env.js ==> 开发环境变量；

　　2.2 index.js ==> 项目配置文件；

　　2.3 prod.env.js ==> 生产环境变量；

3、node_modules：npm加载的项目依赖模块

4、src：开发目录

　　4.1 assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　4.2 components：组件目录，写的组件放在这个目录里面；

　　4.3 router：前端路由，我们需要配置的路由路径卸载index.js里面；

　　4.4 App.vue：跟组件；

　　4.5 main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些meta信息等；

7、package.json：npm配置文件，定义了项目的npm脚本，依赖包等信息