美文网首页
项目安装及vue3 安装及创建

项目安装及vue3 安装及创建

作者: 臭臭的胡子先生 | 来源:发表于2023-03-05 14:14 被阅读0次

    创建一个vue3项目,需要安装node环境,

    推荐使用VScode 点击下载
    安装推荐

    1.Chinese  汉化包安装
    2.Vetur  vue 代码插件安装
    3.HTML Snippets 代码自动补全工具
    4.code-spell-checker 代码格式错误提示插件
    

    安装node 点击下载
    安装成功后查看node跟npm版本

    $ node -v
    v14.10.1
    //其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v,直接查看版本即可
    $ npm -v
    6.14.11
    

    此处是node跟npm的一个简介,有兴趣的可以点击进去查看

    yarn 安装

    npm install -g yarn yarn
    

    安装 淘宝镜像

    npm下载比较慢可以使用cnpm进行下载

    npm install -g cnpm -registry=https://registry.npm.taobao.org
    

    查看是否安装成功

    $ cnpm -v
    cnpm@6.1.1 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
    npm@6.14.8 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
    node@14.10.1 (/usr/local/bin/node)
    npminstall@3.27.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
    prefix=/usr/local 
    darwin x64 19.6.0 
    registry=https://r.npm.taobao.org
    

    说明:如果安装使用过vue脚手架,或使用过vue2,请先卸载!卸载语句如下:

    npm uninstall vue-cli -g 
     yarn global remove vue-cli
    //安装指定版本
    npm install -g @vue/cli@3.11.0   
    

    运行完毕后,就是一个干净的脚手架工具了!
    安装脚手架

    npm install -g @vue/cli 
    

    创建项目
    初始化项目文件夹

    vue create demo
    

    根据自己的需求选择项目需要的功能。

    Vue CLI v5.0.8
    ? Please pick a preset: 
      Default ([Vue 3] babel, eslint) 
      Default ([Vue 2] babel, eslint) 
    ❯ Manually select features 
    

    根据自己的需求勾选

    Vue CLI v5.0.8
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: (Press <space> to select, <a> to 
    toggle all, <i> to invert selection, and <enter> to proceed)
     ◉ Babel
     ◉ TypeScript
     ◯ Progressive Web App (PWA) Support
     ◉ Router
     ◉ Vuex
    ❯◉ CSS Pre-processors
     ◉ Linter / Formatter
     ◯ Unit Testing
     ◯ E2E Testing
    

    一路回车

    ? Choose a version of Vue.js that you want to start the project with 3.x
    ? Use class-style component syntax? No
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected 
    polyfills, transpiling JSX)? Yes
    ? Use history mode for router? (Requires proper server setup for index fallback 
    in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
    by default): 
      Sass/SCSS (with dart-sass) 
    ❯ Less 
      Stylus 
    
    
    

    创建完毕后,进入你的项目根目录

    cd demo 
    npm run serve
    

    打开浏览器,在地址栏输入

    http://localhost:8080
    

    相关文章

      网友评论

          本文标题:项目安装及vue3 安装及创建

          本文链接:https://www.haomeiwen.com/subject/lynuldtx.html