zoukankan      html  css  js  c++  java
  • vue3环境搭建以及创建简单项目。

    1.环境准备,以下都是我的版本。自己在官网上面下载需要的版本。

    尝试了Python3.7.3在创建vue3项目时出现问题。

    node.js10.16.0,

    python2.7.16,

    yarn1.16.0,

    VSCode1.35.0

    2.VSCode中安装插件。

    (英文好的跳过第一步)

    (1)Chinese Simplified Language,完成之后Ctrl+Shift+p,出现搜索框,录入Configure Display Language,选择zh-cn,然后重启VSCode.

    (2)Beautify、ESLint、TSLint、Vetur、Path Autocomplete、

    GitLens、Todo Tree、Bracket Pair Colorrizer 2、Material Icon Theme(根据需要安装)

    3.配置插件

    点击左下角,选择设置,上方直接搜索files,Files:Auto Save 选择onFocusChange,

    清空刚才录入的files,在扩展中找到ESLint,勾选Auto Fix on save.在这一行的下面找到setting.json,编辑该文件

    "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue" ],
    "path-autocomplete.pathMappings": { "@":"${folder}/src" }

    将以上内容写入json文件。配置完成

    4.命令行窗口执行 yarn global add @vue/cli,需要等待一段时间,安装完成之后执行 vue --version,看到的版本在3.0以上即可。

    (查看一下vue-cli是干啥的)

    5.搭建项目。

    选择你想要放置vue3项目的一个目录,进入该目录下的cmd黑窗口,执行vue create porjectName(项目名称)

    如果之前没有创建过vue3的项目,没有保存过之前创建项目时的一个选项。

    会看到两个选项,接下来是我自己的配置(根据自己的需要来选择)

    (1)Manually select features,

    (2)勾选babel 、router 、vuex 、css pre-processors、 linter/Formatter

    (3)use history mode for router ? no

    (4)css pre-processors 选择了sass/scss with node-sass

    (5)eslint   选择了standard config

    (6)lint features 选择了lint on save

    (7)placing config     In dedicated config files

      (8)   save this as a preset for future projects?     yes(保存这些设置,接下来创建项目时直接在第一步选择)

    (9)save preset as:myPreset

    等待创建完成,会出现两行特别醒目的文字:

    cd projectName(你的项目名字)

    yarn serve(启动运行项目)

    6.启动项目。执行yarn serve

    启动成功之后会看到

     -Local :http://localhost:port/

     -Network : http://ip:port/

    注意:端口号默认都是8080,如果8080端口已经被占用,会自动分配8081.

    7.校验自己的成果。

    在浏览器中录入上面任意一个location,都可以看到一个Vue的helloworld页面。

  • 相关阅读:
    Travis 编译使用 JDK 的版本
    《程序员的职业素养》读书笔记
    先做人,在做事
    CAP理论
    ZGC实践
    虚拟化技术的分类及介绍
    C# AD域验证登录
    dotnet core 3.1 站点发布成windows服务
    windows 服务无法调用office word COM接口
    Ext 动态加载js文件
  • 原文地址:https://www.cnblogs.com/joeking/p/11142979.html
Copyright © 2011-2022 走看看