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

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
  • 如果正确输出版本号,说明我们的NodeJSNPM就安装好了,如下图所示:
    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_globalnode_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文件,找到devDependenciesdependencies ,在这里面可以删掉我们不需要的,其他就则都需要使用 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