Vue脚手架搭建及vue项目创建---大屏

灵感在于上数据可视化这门课程，需要做大屏系统。

下面是使用VS Code搭建vue脚手架并创建项目。

第一步 安装node.js和vscode

        node.js在官网下载后安装，安装后输入命令看是否安装好，若没安装好，自行去网上搜索怎么配置环境变量；

查看node.js是否安装成功：

        打开cmd，输入ndoe -v 和 npm -v 如果显示版本信息，则说明安装成功。

参考：VSCode创建Vue项目的完整步骤教程 / 张生荣 (zhangshengrong.com)

第二步 vscode操作

        （1）在d盘建一个文件夹（vue_project）(可以自己建一个文件夹)，在vscode里面打开这个文件夹。

            

        （2）vscode打开终端，输入以下内容

（这一步出错了，可以直接跳过）

npm install -g vue-cli

（报错了，出现了类似于这样的错误）

（3）vue项目创建

参考：Vue脚手架搭建及vue项目创建【详细教程】-CSDN博客

        打开cmd

             安装vue

npm install vue

                安装Webpack

npm install webpack -g

         安装vue脚手架

npm i -g @vue/cli-init

 

使用命令行直接在vue_project文件夹里面打开cmd。

        创建项目：

vue init webpack  项目名称

vue init webpack demo

        关于创建项目的注意事项，我都用的yes，这个网站里面不是这样的，可以参考

VSCode创建Vue项目完整教程 - sunny123456 - 博客园 (cnblogs.com)

（4）启动项目

npm run dev

（在项目下cmd里面继续执行，因为在vscode报之前同样的错误）

在浏览器里面使用http://localhost:8080，出现以下界面说明vue项目创建成功。

（5）打包，配置

参考：VScode使用与利用vue-cli脚手架新建一个vue项目_vsc新建vue-CSDN博客

npm run build

按照这个网址的打包内容，配置好以及新建一个html看是否能够运行。

参考网址(怎么打开launch.json):vscode 的launch.json文件（一）_如何打开lauch.json-CSDN博客

(6)做大屏

参考：vue2+datav可视化数据大屏（1）_vue 数据大屏-CSDN博客

从参考网址的第三个步骤开始操作到最后，结束！

在这个过程中还有一个报错，记不清是哪个步骤报错了以下解决方案：前端工程启动有异常：✘ http://eslint.org/docs/rules/indent Expected indentation of 2 spaces but found 4-CSDN博客

以上是零零散散创建vue项目的步骤以及自己遇到问题的解决方案，如有错误，敬请指正。