Vue新建项目详细流程

• 由于目前大部分主流前后端方向的整合用到的技术栈还是SpringBoot+Vue，再加上Vue3.0正式版才刚刚出一个月，还没有普及。
• 因此特来先写一篇文章暂时记录一下Vue2新手入门，方便大家未来转向3少走过多的弯路。

第一步：需要安装npm即Node.js

蓝奏云网盘下载链接

• 双击打开压缩包内的 node-v12.19.0-x64.msi 进行安装，在安装界面一直Next，直到Finish完成安装。
• 管理员权限打开控制命令行程序(CMD),输入 node -v 以及 npm -v 来检查是否安装正常
• 正常的则会显示当前安装版本号

第二步：使用淘宝NPM 镜像

• 国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝的npm镜像。
• 管理员权限打开控制命令行程序(CMD),输入指令 npm install -g cnpm --registry=https://registry.npm.taobao.org
• 这样就可以使用cnpm 命令来安装模块了,能节省一些时间

第三步:Vue项目初始化
1.第一步：全局安装vue-cli指令

cnpm install vue-cli -g

查看vue-cli是否安装成功，需要输入指令vue list

出现上图则说明安装成功了！

选定路径，新建vue项目，这里我是在桌面上新建了sun文件夹，cd目录路径

下面以项目名为hello-vue新建vue项目

输入指令 vue init webpack hello-vue 即 vue init webpack ”项目名称“

会进行下载模板资源，网络尽量不要断开！

手动创建可以直接按4个回车进行下一步。其中第一行默认为上面指令赋予的项目名称，第二行为描述，第三行为作者名，可为空

接着一路输入n，拒绝自动生成，手动创建先了解一下项目构架

现在已经创建好了，那就让项目先安装依赖,操作指令是：cnpm install

接着再去运行当前项目，操作指令是cnpm run dev

期间会有个webpack打包加载过程，若是没能运行成功，输入

npm install --save-dev webpack 指令安装一下webpack再运行即可。

运行成功则会显示当前运行在某个端口上，默认一般为8080端口

默认工程结构多余部分可删除
其中两个文件可删除，部分代码可删减

其中App.vue文件内源代码可删减为

​

​ ​

必经之路

用别人的东西那肯定得去别人的官网学习全面才能走向熟悉精通程度，当然后端开发人员只要看得懂即可， 点击跳转vue官网
引用element-ui(饿了么开发框架组件)环境之路

新建工程输入指令流程：
1.我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

2.新建工程 vue ini webpack hi-vue

3.接着需要安装vue-router，npm install vue-router --save -dev

4.安装element-ui，npm i element-ui -S

5.安装依赖，npm install

6.安装SASS加载器，cnpm install sass-loader node-sass --save -dev

7.启动测试，npm run dev

注意：期间若是安装失败却在运行时才发现，且已经找不到问题根源，可关闭cmd并且删除当前文件夹内所有资源，重新打开cmd，cd进入工程目录执行上述命令行即可。