zoukankan      html  css  js  c++  java
  • 使用vscode搭建vue3脚手架项目

    安装nodejs

    【1】安装nodejs

    下载nodejs,当前最新版本是 node 16.8

    国外下载地址:https://nodejs.org/en

    国内下载地址:http://nodejs.cn/download

    下载完成之后双击文件【node-v16.8.0-x64.msi】安装。nodejs全局环境变量配置参考 https://www.cnblogs.com/yyee/p/15209612.html

    检查nodejs是否安装:

    node -v

     

    设置阿里npm源,如果不用国内镜像源,安装vue脚手架可能会失败。

    npm config set registry http://registry.npm.taobao.org
    安装vue3脚手架及环境配置

    以管理员权限打开powershell窗口

    【2】安装vue-cli 3脚手架及环境配置

    首先要御载vue-cli 2,然后再安装vue-cli 3 ,

    #御载vue cli 2
    npm uninstall -g vue-cli

    #安装vue cli 3 cnpm install
    -g @vue/cli

    查看vue状态,参数-V为大写。 

    vue -V 或 vue --version

     安装开发当中可能用到的依赖

    #安装 Promise,vue-router,vuex, axios, qs
    cnpm install es6-promise --save
    cnpm install vue-router --save
    cnpm install vuex --save 
    cnpm install axios --save 
    cnpm install qs
    
    #安装style,css,less
    cnpm install css-loader style-loader --save-dev
    cnpm install less less-loader --save-dev 
    
    #安装saas
    cnpm install -g sass --save-dev 
    cnpm install node-sass --save-dev 
    cnpm install sass-loader --save-dev

    在vue3脚手架中安装element ui for vue3插件,插件名为 element-ui,安装 icon图标

    cnpm i element-ui -S
    cnpm install @element-plus/icons
    创建vue3项目

    【3】创建vue3项目

    创建命令为:vue create 项目名称。

    进入vue3项目要保存的目录。

    cd F:\code\web
    vue create vue3_demo

    打开vue cli 3对话

    选择 Manually select features(手动选择) 

    箭头移动到相应选项,按空格键勾选下面项:

    Choose Vue version

    Babel

    Router

    Vuex

     

     选择3.x版本

    按Y  选择历史路由器模式

     选择独立的配置文件

    保存为将来的预设项目

    选择Use NPM

     下面等待安装,安装完成后输出

      

    用vscode打开 【F;\code\web\vue3_demo】 文件夹,

    打开一个新的终端,运行命令 npm run serve 运行vue3_demo项目。

    npm run serve

    打包vue3项目

    【4】打包vue3项目

    在vscode终端输入

    npm run build

    打包成功后会生成一个dist文件夹,打包文件全部放在dist文件夹里。

    vue3使用typescript配置

    【5】 将vue3配置typescript环境

    安装 type

    cnpm install -g typescript

    然后用vs code打开vue3项目,打开一个新的vs code终端,运行命令 vue add typescript

  • 相关阅读:
    HDU Problem 1811 Rank of Tetris【拓扑排序+并查集】
    POJ Problem 2367 Genealogical tree【拓扑排序】
    HDU Problem 2647 Reward【拓扑排序】
    HDU Problem 1285 确定比赛名次【拓扑排序】
    HDU Problem HDU Today 【最短路】
    HDU Problem 3665 Seaside【最短路】
    HDU Problem 一个人的旅行 【最短路dijkstra】
    HDU Problem 1596 find the safest road【最短路dijkstra】
    Beyond Compare文本合并进行内容替换要注意什么
    用这些工具都可以比较代码的差异
  • 原文地址:https://www.cnblogs.com/yyee/p/15513641.html
Copyright © 2011-2022 走看看