利用vue-cli初始化项目

发表于 | 分类于
字数统计: 745 字 | 阅读时长 ≈ 3 分钟

可以快速初始化vue项目，提供一套本地node测试服务器，集成打包上线方案

利用vue-cli脚手架初始化项目

1. 首先电脑需要安装好node和包管理工具

  • 去官网下载node稳定版本 点击传送门
  • 记得下载.msi格式的，可以避免配置环境变量

  • npm（node安装以后自带npm）

  • 如果想使用cnpm 需要安装一下

    1
    2
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    // 通常npm下载速度比较慢所以很多人会选择cnpm淘宝镜像

  • 如果想使用yarn 需要安装一下 

    1
    2
    npm install -g yarn
    // 只是命令上与npm和cnpm有些出入要看文档

具体的命令可以查看对应的官方文档

2.接下来是安装一个强大的编译工具 webpack和vue脚手架

  • 我通常用cnpm装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 全局安装webpack
    cnpm install webpack -g
    // 全局安装vue-cli
    cnpm install vue-cli -g
    // 检测vue版本 -V大写
    vue -V
    // 检测node版本 -v小写
    node -v
    // npm 版本
    npm -v

3. 初始化项目

  • 输入一些命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vue init webpack myProject //myproject 为项目名称
// 回车以后会询问几个简单的选项 我们进行填写 一路填写+回车
Project name : myproject
// 如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了myproject
Project description: 
// 项目描述 默认为A Vue.js project,直接回车，不用编写。
Author：
// 作者 如果你有配置git的作者，他会读取。
Install  vue-router ? 
// 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code?
// 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
setup unit tests with  Karma + Mocha? 
// 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?
// 是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

4. 下载依赖包及运行项目

  • cnpm i 包都下载好以后

  • npm run dev 项目就在本地跑起来了 浏览器中可以直接访问

5.有几个重要的文件,简单的认识一下

  • package.json
    • scripts: 命令行里执行的命令具体做了什么，与这里一 一对应 例如npm run dev
    • dependencies：生产环境以来的包，对应–save
    • devDependencies: 开发环境中以来的包 对应–save-dev
  • webpack.base.config.js
    • webpack的基本配置文件
    • entry入口文件
    • output出口文件
  • babelrc
    • es6转化为es5的配置

6. 项目打包上线

  • 执行命令

    1
    2
    npm run build
    // 默认生产dist目录 里面是打包好的静态文件 可以部署到服务器

    ​

------ 本文结束------
0%