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

clipboard.png

  • 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. 安装完成后的目录

clipboard.png

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

clipboard.png

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

分界线~~~

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

clipboard.png
在浏览器地址栏输入对应连接能出现一下页面的,表示启动成功了。
clipboard.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值