Vue新建项目详细流程

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

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

蓝奏云网盘下载链接：https://wws.lanzous.com/ipbkbhj07ve

双击打开压缩包内的 node-v12.19.0-x64.msi 进行安装，在安装界面一直Next，直到Finish完成安装。

管理员权限打开控制命令行程序(CMD),输入 node -v 以及 npm -v 来检查是否安装正常

正常的则会显示当前安装版本号

       第二步：使用淘宝NPM 镜像

       第三步: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个回车进行下一步。其中第一行默认为上面指令赋予的项目名称，第二行为描述，第三行为作者名，可为空

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

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

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

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

其中两个文件可删除，部分代码可删减

<template>
  <div id="app">


  </div>
</template>


<script>


export default {
  name: 'App'
}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

必经之路

    用别人的东西那肯定得去别人的官网学习全面才能走向熟悉精通程度，当然后端开发人员只要看得懂即可，官网链接为 https://cn.vuejs.org/

引用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进入工程目录执行上述命令行即可。