Vue.js环境搭建、安装Vue-cli脚⼿架、Visualstudiocode
⽬录
本章简介
⽬前典型的前端三⼤框架：Angular.js、React.js、Vue.js。其中，Vue.js框架更容易上⼿，灵活度更⾼，在企业级开发中受到前端开发⼈员的青睐，所以本书的⼤觅项⽬采⽤的vue.js框架完成。
任务1 ⼤觅项⽬业务场景
1.1 ⼤觅项⽬业务分析
⼤觅项⽬的业务类型属于票务销售，⾸先分析⼀下⼤觅项⽬的业务，如下图：
1.2 ⼤觅项⽬技术栈选型
本项⽬选择的核⼼技术是前端组件化框架Vue.js，因此确定了Vue.js+Webpack这套技术栈，也是⽬前最⽕的技术栈之⼀。⼤觅项⽬的技术栈选型分析如下：
安装Node环境
安装淘宝镜像CNPM
安装Vue-cli脚⼿架，初始化vue项⽬
安装配置iView框架
页⾯路由选择使⽤vue-router插件完成
Vue项⽬中使⽤VueX进⾏数据共享管理
选择使⽤ECMAScript6语法编写JavaScript
选择Vue官⽅推荐的axios插件发送异步请求
⼤觅项⽬为前后端完全分离的项⽬，需要的后台数据通过Mock数据进⾏模拟
任务2 ⼤觅项⽬环境搭建
⼤觅项⽬的环境搭建依赖于Node.js的环境，所以接下来介绍Node.js的安装以及NPM包管理⼯具的安装、配置等。
前端页面模板2.1 Node.js的介绍
Node.js是⼀个基于Chorme V8引擎的JavaScript运⾏环境。Node.js使⽤了⼀个事件驱动、⾮阻塞式I/O的模型，既轻便⼜⾼效。
Node.js安装：
根据电脑的不同系统位数进⾏下载对应安装包，⼀直“下⼀步”就可以了。
检验Node.js是否安装成功：
**1.**Win+R调出运⾏窗⼝，输⼊cmd回车：
2.在命令提⽰符窗⼝⾥⾯输⼊node -v，查看你安装node.js的版本：
2.2 什么是NPM
NPM是Node.js的包管理器，是全球最⼤的开源库⽣态系统，它集成在Node.js中，所以在安装Node.js的时候就已经⾃带NPM包管理器，⽆需我们⾃⼰单独安装。
检验NPM是否安装成功：
在命令提⽰符窗⼝⾥⾯输⼊npm -v，查看你安装npm的版本：
NPM安装成功后，全局安装express框架，在命令提⽰符窗⼝输⼊：npm install express -g
2.3安装CNPM
2.4安装Vue-cli脚⼿架
Vue-cli是⼀个官⽅命令⾏⼯具，可⽤于快速搭建⼤型单页⾯应⽤。
使⽤CNPM全局安装Vue-cli：
在命令提⽰符窗⼝输⼊：cnpm install vue-cli -g
检验Vue-cli是否安装成功：
在命令提⽰符窗⼝⾥⾯输⼊：vue -V，查看你安装的Vue-cli的版本号：
2.5安装Webpack
使⽤CNPM全局安装webpack：
由于webpack4.0以上版本容易报错，我们安装3.5.5版本的进⾏配置，在命令⾏窗⼝中输⼊：npm  install  webpack@3.5.5  -g
2.6 创建项⽬dm
在命令提⽰符窗⼝输⼊：vue init webpack dm
命令交互含义：
Project name：项⽬名称，可以直接回车
Project description：项⽬的描述内容，可以⾃定义
Author：项⽬的作者，可以写上⾃⼰的邮箱
Vue build：打包的⽅式，这⾥可以直接回车
Install vue-router（Y/n)？：是否安装Vue路由，建议选Y
Use ESLint to lint your code（Y/n)？：是否启⽤ESlint检测，建议选n
Set up unit tests（Y/n)？：是否需要单元检测，建议选n
Setup e2e tests with Nightwatch（Y/n)：是否需要端对端的检测，建议选n 2.7 启动项⽬dm
1.⾸先进⼊项⽬⽬录中，在命令提⽰符窗⼝输⼊：cd dm
2.项⽬依赖模块：在命令⾏窗⼝输⼊：cnpm install
3.最后启动项⽬，在命令⾏窗⼝输⼊：npm run dev
2.8 安装开发⼯具Visual Studio Code
根据电脑的不同系统位数进⾏下载对应安装包，⼀直“下⼀步”就可以了。
上⾯我们已经使⽤npm 安装了项⽬dm，我们在Visual Studio Code 中打开该⽬录，结构如下：
⽬录解析：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。