Vue初学之使用webpack模板创建项目

这是Vue官网 通过webpack模板创建项目的相关介绍:
https://vuejs-templates.githu...

1. 安装vue脚手架
cnpm install -g vue-cli

cnpm 是安装了淘宝镜像后才有的命令,npm安装插件是从国外服务器下载的,受网络影响出现异常的可能性大。所以淘宝团队器在中国实现了是一个完整npmjs.org镜像,可以用此代替官方版本(只读),同步频率目前为10分钟一次以保证尽量与官方服务同步。安装命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli脚手架对于很多无法独立配置webpack构建工具的同学们十分友好,cli已经将需要的东西配置好了,你只要写好项目的业务,用命令行就可以达到调试或打包的功能。

2. 进入你想要存放项目的地址路径,下载webpack模板
vue init webpack vue-keepdoing

Vue初学之使用webpack模板创建项目

  • project name: 项目名
  • project description: 项目描述
  • author: 作者
  • Vue build: 编译选第一个就好了,直接回车
  • install vue-router: 是否装路由
  • use eslint to lint your code: 是否装eslint检查你的代码规范
  • Setup unit tests(Y/n): 是否安装单元测试
  • Setup e2e tests with Nightwatch(Y/n): 是否安装e2e测试

分界线~~~

3. 安装完成后的目录

Vue初学之使用webpack模板创建项目

  • package.json: 每个项目的根目录下一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。

Vue初学之使用webpack模板创建项目

  • build: webpack的配置文件
  • config: 这里也是webpack的配置文件,不过是给我们配置的
  • src: 项目源代码
  • static: 静态资源目录(第三方js库等等)

分界线~~~

4. cd进入项目目录下安装依赖
cd vue-keepdoing
    cnpm install
5.启动项目
npm run dev

Vue初学之使用webpack模板创建项目
在浏览器地址栏输入对应连接能出现一下页面的,表示启动成功了。
Vue初学之使用webpack模板创建项目

相关推荐