头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

Vue_CLI脚手架学习与搭建

2019-06-18
#Vue #Vue_CLI

今天我们来学习一下Vue CLI脚手架，本文主要是总结Vue CLI脚手架搭建过程及总结遇到的问题，跟着我一起来学习吧~

1.node.js安装与环境配置

1.1 node.js安装
  • 安装包下载地址：https://nodejs.org/en/

  • 下载完成后，双击node-v10.16.0-x64.msi，开始安装Node.js，全程默认一直点击下一步（注意：安装地址最后不要默认选择C盘，选择D盘），安装完毕后点击finish结束安装进程，然后在VS code终端，依次输入命令：

    1
    2
    node -v
    npm -v

  • 如果正确输出版本号，说明我们的NodeJS和NPM就安装好了，如下图所示：
    Image1.png

  • 此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西
1.2 node.js环境配置
  • 说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中，占C盘空间。
  • 例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹D:\software\nodejs下创建两个文件夹node_global及node_cache如下图：
    Image2.png
  • 创建完两个空文件夹之后，打开终端窗口，输入
    1
    2
    npm config set prefix "D:\software\nodejs\node_global"
    npm config set cache "D:\software\nodejs\node_cache"

Image3.png

  • 接下来设置环境变量，控制面板-系统和安全-系统-高级系统设置-高级-环境变量
    Image4.png
  • 进入环境变量对话框，在系统变量下新建NODE_PATH，输入D:\software\nodejs\node_global\node_modules
    Image5.png
  • 将用户变量下的Path修改为D:\software\nodejs\node_global
    修改前:Image6.png
    修改后:Image7.png
  • 配置完后，安装个module测试下，我们就安装最常用的express模块，打开终端窗口，
  • 输入如下命令进行模块的全局安装：npm install express - # -g是全局安装的意思
    修改后Image8.png
  • 可以看到express被安装到我们刚刚设置的路径下，就说明配置成功
    Image9.png

2.Vue CLI安装与配置

2.1 Vue CLI安装

  • 可以使用下列任一命令安装这个新的包：

    1
    2
    npm install -g @vue/cli
    yarn global add @vue/cli

  • 你还可以用这个命令来检查其版本是否正确 (3.x)：vue --version
    Image10.png

2.2Vue CLI项目搭建
2.2.1Vue CLI >= 3时进行项目构建

  • 我们安装的Vue CLI >= 3，所以直接运行以下命令来创建一个新项目：

    1
    vue create hello-world

  • 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性，这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
    Image11.png

  • 在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc
    Image12.png
  • 直接选取默认的设置就可以快速进行创建，就可以看到在安装各种插件，我们的项目正在下载搭建中：
    Image13.png
  • 再来试一个自定义安装的项目搭建，方向键上下移动，空格选中，Enter确定
    Image14.png

  • 再根据刚刚的选择会弹出来以下选框，按照自己需求进行选择
    Image15.png

    1
    2
    3
    4
    5
    6
    ? Use history mode for router?      //是否使用history模式的路由
    ? Pick a CSS pre-processor      //CSS预处理器选择
    ? Pick a linter / formatter config: (Use arrow keys)   //选择哪个ESLint自动化代码格式化检测
    ? Pick additional lint features      //选择语法检查的时期
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?   //配置文件的存放位置
    ? Save this as a preset for future projects? (y/N)   //是否保存此预设(选择yes的话下次就可以不用进行配置)

  • 出现以下界面说明项目搭建成功
    Image16.png

  • 安装后移动到目录 并启动，启动完毕后会提示我们浏览器访问地址
    1
    2
    cd mydemo  
    npm run serve  // 这里和版本2不一样了。2是npm run dev 而版本3 是npm run serve

Image17.png

  • 浏览器访问：http://localhost:8080/，效果如下：
    Image18.png
2.2.2Vue CLI < 3时，拉取 2.x 模板 (旧版本)进行项目构建

  • Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

    1
    2
    npm install -g @vue/cli-init    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack mydemo

  • 然后终端会出现下图“一问一答”模式，如图：
    Image19.png

  • 这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响，很傻瓜式：
    Project name：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
    Install vue-router:是否需要vue-router，默认选择使用，这样生成好的项目就会有相关的路由配置文件
    Use ESLint to lint your code:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置
    Setup unit tests with Karma + Moch?: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦
    Setup e2e tests with Nightwatch：是否安装e2e测试，这里我也同样选择的是“N”
    这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

  • 全部选择好回车就进行了生成项目，现在打开之前说过的package.json文件，找到devDependencies 和 dependencies ，在这里面可以删掉我们不需要的，其他就则都需要使用 npm install 下载安装，例如vue： npm install vue –save-dev

    1
    npm install 依赖包

  • 运行mydemo，输入命令

    1
    npm run dev

  • 在浏览器输入地址http://localhost:8080，看到页面，说明大功告成，一个Vue项目已经初始化完成

2.2.3使用图形化界面进行项目构建

  • 你也可以通过 vue ui 命令以图形化界面创建和管理项目：

    1
    vue ui

  • 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
    Image20.png

2.3项目目录结构
  • 通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以参考网上的解释，有了这个框架，接下来就可以根据自己的喜好来重新制定网站了
    Image21.png
2.4修改端口号
  • vue-cli构建的项目，在控制台npm run dev启动后，默认的调试地址是8080端口的。但是大部分时候，我们都要并行几个项目开发，很有可能已经占用了8080端口，所以就涉及到如何去更改调试地址的端口号了
  • 修改路径：
    2.x：config --> index.js
    3.0+：node_modules-->@vue-->cli-service-->lib-->commands-->build-->serve.j
    Image22.png
Lililich's Blog
66Article 38Tags 13Categories