参考链接:

(一)Vue——如何创建一个Vue项目(完整步骤) - 㭌(mou)七 - 博客园

基于Visual Studio Code搭建Vue开发环境

初学Vue------使用Vue-cli搭建项目_0?0的博客-CSDN博客

网上有关vue的一个小demo :库里博客: 一个关于库里的博客hhdRight/ChaoCP-page


1 安装node.js

1.1 node.js下载+安装

下载地址:       https://nodejs.org/en/ 
安装详细步骤:Node——安装的详细步骤 - 㭌(mou)七 - 博客园

                          node安装后的设置(node_global和node_cache) 

快速查看node.exe的安装路径,在cmd中:where node

本地安装:npm install express 会安装到当前项目

全局安装:npm install express -g 会安装到指定的目录(node_global)

设置node_global和node_cache 

        1. 在node安装目录创建node_globalnode_cache文件夹

        另外,如果没有设置全局目录node_global,那么全局安装的文件将会保存到         C:\Users\Admin\AppData\Roaming\npm

        2. 所以,安装好node后,要设置一下node_global和node_cache(node缓存文件夹)

        设置环境变量:

        用户变量设置:添加node安装目录下的node_global的路径

        系统变量设置:添加变量 NODE_PATH 值为:node安装目录下node_modules的路径

        3. 打开命令行,执行

npm config set prefix "node_global的路径"   

npm config set cache "node_cache的路径"

pm config list // 查看npm基本配置

       4. 测试

         执行npm install express -g 后,查看node_global/
   node_modules
文件夹下会有express文件夹

        5. 安装淘宝镜像cnpm
        淘宝镜像cnpm跟npm的关系可以理解为github和gitee

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

1.2 检查node.js安装成功

node -v 
npm -v

1.2 cnpm(使用淘宝的镜像)

      镜像网站:npmmirror 中国镜像站
      输入:npm install -g cnpm –registry=https://registry.npm.taobao.org        
      即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
      查看是否安装成功:cnpm -v

1.3 Vue3项目需要注意根据需求安装不同版本的Node

注意:       vite 要 Node.js 12.0.0 以上版本,但推荐在 14.0.0 以上以获得最佳支持;

     vue-cli 4.5 需要 Node.js 10.12.0 以上版本;

     vue-cli 5.0(目前还是 beta 版)也需要 Node.js 12.0.0 以上版本。

     Webpack 4 需要 Node.js 6.11.5 以上版本,但推荐在 8.9.4 以上以获得最佳支持;

     Webpack 5 需要 Node.js 10.13.0 以上版本。

     element-plus 官方表示不支持 Vue 2.X

1.4 更新npm到最新版

npm install npm -g   //更新npm到最新版

npm install -g npm //更新npm到最新版

2 安装vs code

参考文章1: 

Visual Studio 2019下载及安装的详细教程_一位懒得写博客的小学生的博客-CSDN博客_vs软件下载

或者:


国内的下载地址:http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.43.0.exe(windows64位)

3 安装@vue/cli:

全局安装vue-cli    

安装好了node,可以直接全局安装vue-cli        

        方式一:npm install -g @vue/cli    ||  npm install -g vue-cli

        方式二:全局安装vue-cli         
                npm install --global vue-cli    或   cnpm install --global vue-cli      

     (cnpm 安装环境和依赖包会更快  推荐使用cnpm)

如果安装失败,则用 npm cache clean清理缓存,然后再安装 

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

  1. 如果你是用cnpm/npm安装的,并且是安装在全局的,那么默认安装好的vue安装位置就在:
    C:\Users\Administrator\AppData\Roaming\npm\node_modules
  2. 如果你是用 cnpm/npm安装的,并且是安装在全局的,并且之前配置过node_global和node_cache文件夹和那么vue就安装在NodeJS安装目录下的node_global下
    查看vue的位置
    
    where vue

查看版本vue -V

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

C:\Users\Admin>vue -V
@vue/cli 5.0.4

如果提示“无法识别 ‘vue’ ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

感兴趣可以继续往下参考:

首先来到Vue.js的gthub页面 点击Vue-ci

Vue.js的gthub页面

Vue.js的gthub页面 Vue-ci锚点

去参考Readme

4 配置VS code使用英文/中文:

        按下ctrl+p, 输入: > Config, 选择: “Configure Display Language"
        将原先默认的英文:"locale": "eh" ----> 改为中文:"locale": "zh-cn"

5 新建vue工程:

输入----> vue init webpack   vue-demo 

或者

输入----> vue create vue-demo  

最终呈现效果就是新建了个vue-demo文件夹,所有文件生成到里面。

其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板vuejs-templates · GitHub

说明:

Project name ==> 项目名称  自己输入;

Project description ==> 项目描述  自己输入;

Author ==> 项目作者  自己输入;

Vue build ==> 打包方式,回车即可;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

新版需要选择运行依赖安装方式选择第三个 方便不费时

Should we run `npm install` for you after the project has been created? (recommended)
    Yes, use NPM
    Yes, use Yarn
    > No, I will handle that myself           

完成以上动作后, 会在当前工程目录下生成一个 .eslintrc.json文件

问题1: 

目标目录下无法执行命令

问题1解决方案:  

执行:get-ExecutionPolicy,回复Restricted,表示状态是禁止的
执行:set-ExecutionPolicy RemoteSigned即可,根据信息回复输入Y或者A不起作用

仔细看它的提示然后按照提示输入:Set-ExecutionPolicy -Scope CurrentUser
然后再输入:RemoteSigned 
最后输入A即可。

问题2:

输入命令后提示Please run npm i -g @vue/cli-init and try again.

PS C:\Users\Admin\Desktop\vue-init> vue init webpack vue-demo
vue init webpack vue-demo
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.

问题2解决方案: 

>>> npm install -g @vue/cli-init
>>> vue init webpack vue-demo

6 进入项目,安装依赖

        已安装淘宝镜像:cnpm  i  或 cnpm install 
        否则输入:             npm i  或  npm install 

        安装依赖后的文件夹后,多了一个node_modules文件夹

7 安装插件

1 安装vetur插件

当你准备打开一个vue文件时,根据编辑器右下方的提示,点击安装

问题1:

Vetur can't find `tsconfig.json` or `jsconfig.json` in c:\Users\Admin\Desktop\vue-init.

问题1:解决方案 

参考链接:https://blog.csdn.net/qq_29733191/article/details/123307128

原因

Vetur 0.31.0版本新增了一个vetur.config.js的配置文件,

在这个版本之后,会优先查找项目中是否配有tsconfig.json(ts项目)或者jsconfig.json(js项目),

没找到这2个文件就去找vetur.config.js,如果都没有,就会抛出这个提示。

说明

VSCode的JavaScript支持可以在两种不同的模式下运行:

文件范围(没有jsconfig.json)

在此模式下,在VSCode中打开的JavaScript文件被视为独立单元。

只要文件a.js没有显式引用文件b.ts(使用///引用指令或CommonJS模块),两个文件之间就没有共同的项目上下文。

显式项目(使用jsconfig.json)

JavaScript项目是通过jsconfig.json文件定义的。目录中存在此类文件表示该目录是JavaScript项目的根目录。

文件本身可以选择列出属于项目的文件,要从项目中排除的文件,以及编译器选项(见下文)。

当您在工作空间中有一个定义项目上下文的jsconfig.json文件时,JavaScript体验会得到改进。

因此,当您在新工作空间中打开JavaScript文件时,我们提供了一个创建jsconfig.json文件的提示。

解决方法(3选1)

1.配置Vetur插件,忽略提示:

vetur.ignoreProjectWarning: true

2.在项目根目录创建jsconfig.json文件,加入代码:

{undefined
“include”: [
“./src/*”
]
}

3.在项目根目录创建vetur.config.js文件,加入代码:

module.exports = {undefined
// vetur配置,会覆盖vscode中的设置。 default: {}
settings: {undefined
“vetur.useWorkspaceDependencies”: true,
“vetur.experimental.templateInterpolationService”: true
},
// 普通项目采用默认配置 default: [{ root: './' }]
}

2 安装eslint插件

        npm install -g eslint

        error1:如果eslint未生效查看并检查下eslint server是否启动或报错

        error2:        
                使用vue/cli 3.0 自定义配置项创建工程后, vscode中eslint无法自动修复格式的问题,原因: .eslintrc.js文件中缺少了配置, 如下图所示, 添加右侧红框部分后, 添加依赖eslint-plugin-html后即可

plugins: [
'vue' ,
'html'
]
module.exports = {
    // 默认情况下,ESLint会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有   "root": true,它就会停止在父级目录中寻找。
    root: true,
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    parserOptions: {
        // 代码是 ECMAScript 模块
        sourceType: 'module'
    },
    env: {
        // 预定义的全局变量,这里是浏览器环境
        browser: true,
    },
    // 扩展一个流行的风格指南,即 eslint-config-standard
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        // 此插件用来识别.html 和 .vue文件中的js代码
        'html',
        // standard风格的依赖包
        "standard",
        // standard风格的依赖包
        "promise"
    ],
    //配置的一些规则
    'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}


最终的.eslintrc.json文件

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": "off",
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

error3  报错: Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style) 

// 统一换行符,"\n" unix(for LF) and "\r\n" for windows(CRLF),默认unix
// off或0: 禁用规则
'linebreak-style': 'off'

8 输入  npm run dev,启动项目

 

9 打包上线

自己的项目文件都需要放到 src 文件夹下

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。

附录

 vue-cli项目结构详情

项目结构详情

Logo

前往低代码交流专区

更多推荐