• 使用vue-cli3搭建项目详细步骤


    本文将介绍使用vue-cli3创建项目以及一些相关的配置。

    手脚架vue-cli最新版本为vue-cli3,,如果电脑上安装了vue-cli2来创建vue项目的话,需要先将vue-cli2先卸载,重新安装vue-cli3。

    安装vue-cli3

    1、执行npm uninstall vue-cli -g命令卸载之前的旧版本

    2、执行npm install @vue/cli -g命令安装最新版本

    创建项目

    1、vue create 项目名称

    示例:vue create hell-world

    注意:不能用驼峰方式命名项目名称了,它会报错的,只能全小写

    2、执行(1)命令以后出现如下界面,我选择的是手动配置

    3、选择需要的模块

    选择的选择的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing

    在这里不知道为什么选这些,组长就这么写的,后续再问。

    4、一系列操作,首先是路由部分,我选择了n

    5、回车以后让你进行eslint配置,我选择了标准配置

    6、检查设置,我选择的是保存的时候检查

    7、单元测试。前端的单元测试目前有两个比较热的框架,一个是karma+mocha+chai的方式,一个是jest。我选择的是第一个,我也不懂,等公司大佬教吧

    8、回车以后进入到这个配置,也不知道是什么,先听组长的命令,选择nightwatch。听说nightwatch框架,语法简洁,比较容易理解。

    9、文件存放位置。我选择的是单独存放。

    10、是否保存当前配置,以便下次快速创建。我选择的否

    11、回车以后出现创建页面

    12、大写的注意:在执行上面的时候会报错。会报关于chromedriver的错误,至于为什么会出现这个错误就不知道了。如果出现这个错误,输入npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver命令执行后,重新创建项目,完美解决。

    13、稍等片刻,你将看到如下情景。此时项目创建成功,我们就迫不及待的进入到项目,执行npm run serve看一下。

    至此,一个vue项目创建完成。稍后我会说明一下用cli3创建的vue项目的目录结构以及各个文件的作用,以及加上自己在开发项目的时候增添一些目录结构和项目的配置。

  • 相关阅读:
    新手学Python必看的几个练手小项目,轻松不枯燥哦!
    实力讲解,一文读懂Python闭包与装饰器!
    Python必不可少的小技巧,一行代码减少一半内存占用!
    千篇一律的Python爬虫,大神精心总结的爬虫套路!
    Python小技巧:获取Linux系统基本信息
    大数据时代|搭建Python数据分析平台
    利用Python实时接收微博小姐姐动态啦~
    Python爬虫:把爬取到的数据插入到execl中
    正则表达式 元字符
    正则表达式——(2) – 语法
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/10899827.html
Copyright © 2020-2023  润新知