“微商城”项目（2准备工作）

一.安装Node.js

本项目使用Vue.js前端框架进行开发，在创建项目之前需要先下载Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端。接下来对Node.js的下载和安装进行详细讲解。

1. 打开Node.js官方网站，找到Node.js下载地址，如下图所示。

 从上图可以看出，Node.js有LTS和Current两个版本，在这里选择LTS版本进行下载即可。

或者我的百度网盘资源下载：

链接：https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码：huan

1. 1双击安装包进行安装，如下图所示。安装过程全部使用默认值。（建议不要放C盘）

        1.2删除隐藏文件.npmrc（C:\Users\你自己的名字）[因为我已经删除了，这里就无法截图]

        2.安装git-bash命令行工具，安装过程全部使用默认值一直Next即可（建议不要放C盘）

我的百度网盘资源下载：

链接：https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码：huan

        3.打开git-bash命令行工具（在桌面空白处单击右键---->Git Bash Here）

 查看Node.js版本信息，node -v 如下图所示。

        4.为了提交开发效率，可以利用npm安装淘宝镜像的cnpm，示例代码如下。

切换淘宝镜像：npm config set registry https://registry.npm.taobao.org

查看镜像源：npm config get registry

上述代码，表示npm持久使用淘宝镜像安装依赖包。

二.安装vue-devtools

vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。下面简单介绍安装流程。

1. 下载vue-devtools-5.1.1.zip压缩包到本地。

或者我的百度网盘资源下载：

链接：https://pan.baidu.com/s/1XlE38px_sCpbxyKPqvlFBg?pwd=huan 
提取码：huan

        2.将压缩包进行解压，然后切换到解压好的vue-devtools-5.1.1目录

2.1单击右键--->Git Bash Here-->输入以下命令进行依赖安装。

npm install

2.2构建vue-devtools工具插件，执行命令如下。

npm run build

2.3.将插件添加至chrome浏览器。单击浏览器地址栏右边的“”按钮，在弹出的菜单中选择“更多工具”-“扩展程序”，如下图所示。

在上图中，单击“加载已解压的扩展程序”按钮，此时会弹出选择框，需要用户选择扩展程序目录。找到vue-devtools-5.1.1/shells/chrome目录，将其添加到扩展程序中。

2.4配置完成后，可以看到当前vue-devtools工具信息，并在Chrome浏览器窗口的右上角会显示Vue的标识，如下图所示。

 

三.安装Vue脚手架

1.我们在项目的根目录下---->单击右键------Git Bash Here

1.1Vue CLI 3.x版本的包名称由vue-cli（旧版）改成了@vue/cli（新版），如果已经全局安装了旧版的vue-cli（1.x或2.x），需要通过如下命令进行卸载。

npm uninstall vue-cli -g

1.2通过npm方式全局安装@vue/cli脚手架，具体命令如下。

npm install @vue/cli@3.10 -g

1.3安装完成后，为了检测是否安装成功，使用如下命令来查看vue-cli的版本号。

vue -V     （或者vue --version）

2.打开命令行工具，使用vue create命令创建项目，它会自动创建一个新的文件夹，并将所需的文件、目录、配置和依赖都准备好。

2.1创建项目命令如下。（vue_shop04是项目名称，这个命名可以换成其他）

vue create vue_shop04

执行上述代码后，Vue CLI提示用户选取一个preset（预设），其中default是默认项，在这里选default即可，示例代码如下。

Vue CLI v3.10.0

? Please pick a preset: (Use arrow keys)

> default (babel, eslint)

  Manually select features

（若这里报错了，把C盘里面的   users/你的名字/ vue.rc文件里的yarn      改成    npm）

命令行安装成功如下：

在vscode中插件安装后的结果，如下图所示。

 在D:\vue\end-project下自动生成vue_shop04

四.配置VS Code

Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的编辑器， 推出之后便很快流行起来，深受开发者的青睐。作为前端开发人员来说，一个强大的编辑器可以让开发变得简单、便捷、高效。本书选择基于VS Code编辑器进行讲解。

1.在VS Code中打开刚创建好的vue_shop04项目，在项目根目录新建.editorconfig文件，配置代码风格，示例代码如下。

 [*.{js,jsx,ts,tsx,vue}]
indent_style = space 
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

 2.接下来，安装Vetur扩展。在VS Code界面左侧栏找到插件扩展（Extensions）图标，搜索并安装Vetur插件，插件扩展图标如下图所示。

 Vetur插件安装完毕之后的界面效果如下图所示。

 在vue_shop04项目根目录创建.vscode\settings.json文件，在json文件中配置代码风格。

{
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  }
}

 五.启动和退出项目

1.进入vue_shop04文件夹中，单击右键------>Git Bash Here

2.项目创建完成后，使用如下命令启动项目。

npm run serve

执行命令后，会默认启动一个本地服务，如下图所示。

 3.在浏览器中打开http://localhost:8080，页面效果如下图所示。

 4.如果想要退出项目，在命令行工具中，按Ctrl+C

六.安装vue-router

使用npm方式为项目安装vue-router，将路由文件单独存放在src目录下的router.js文件中。当组件准备好之后，开始创建路由。vue-router安装命令如下。

进入vue_shop04文件夹中，单击右键------>Git Bash Here(前面打开的那个不能关闭，我们要重新打开一个)

npm install vue-router@3.1 --save

安装完成后，将src/router.js路由文件创建出来，具体代码如下。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './components/HelloWorld.vue'
var router = new VueRouter({ // 创建路由实例对象router
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home, name: 'home' }
  ]
})

export default router     // 暴露路由对象属性

创建src\router.js文件后，需要在src\main.js入口文件中引入该文件，并在Vue实例上注册，如下所示。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

保存上述代码，启动服务进行测试。

npm run serve

在浏览器中打开http://localhost:8080，执行上述代码后，会看到地址栏出现了“/#/home”，表明设置成功，效果图如下。

 七.安装Vuex

1.使用npm方式为项目安装Vuex，安装命令如下。

npm install vuex@3.1 --save

2.在src\main.js文件的import App from './App.vue' 语句下引入如下代码。

import store from './store'

并且在Vue实例上注册

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

八.安装Mint UI

Mint UI是基于Vue.js的移动端组件库，使用Vue技术封装出来了成套的组件，可以无缝的和Vue项目进行集成开发。考虑到在项目中用到了该框架，所以需要先安装Mint UI，安装命令如下。

npm install mint-ui@2.2 --save

将Mint UI安装完成后，在src\main.js中引入，代码放置在new Vue前面，示例代码如下。

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

九.安装MUI

打开MUI官方网站https://github.com/dcloudio/mui，找到MUI下载地址下载到本地

或者百度网盘资源下载：

链接：https://pan.baidu.com/s/1lSsCjf-_zx1ymu6uZeG26Q?pwd=huan 
提取码：huan

在本项目中，把MUI相关的css、js等资源放置在src/lib目录下，如下图所示。

然后在main.js文件中的import router下面添加代码，引入MUI的样式文件。

import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'

 

由于MUI的代码在ES Lint的语法检查中不通过，为了避免报错，将MUI的js目录从语法检查中排除。在项目根目录创建.eslintignore文件，内容如下。

src/lib/mui/js

十.安装sass

sass是Vue中常用的CSS预处理器之一，安装Sass/SCSS，具体命令如下。

npm install sass-loader@8.0 --save-dev

npm install node-sass@4.13 --save-dev

npm install sass@^1.3.0 --save-dev

npm i fibers -D

1.安装完成后，重新编写src\App.vue文件，示例代码如下。

<template>
  <div class="container">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
#app {
  font-family:'Avenir',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  box-sizing: border-box;
}
.container {
  padding-top: 40px;
  padding-bottom: 50px;
  overflow-x: hidden;
}
</style>

2.在src\components\HelloWorld.vue文件中，编写如下代码。

<template>
  <div>
    Hello World
  </div>
</template>

3.在src目录下创建store.js(内容为空)

4.保存上述代码，运行测试程序。

npm run serve

5.在浏览器中打开http://localhost:8080，执行上述代码后，会看到如下页面效果，表明设置成功。

接着这篇文章的是“微商城”项目（3页面布局）

若出现问题可以私信我，我如果能解决，会尽量帮忙的(●ˇ∀ˇ●)