一步一步搭建vue项目

**

1 安装步骤

**
1.创建一个目录，我们这里定义为Vue
2.在Vue目录打开dos窗体，输入如下命令：vue create myproject
3.选择自定义

4.先选择要安装的项目，我们这里选择4个

5.选择yes

6.选择SCSS/SASS

7.选择第一个

9.选择自己的配置文件

10.选择no

11.等待下载完成

12.下载完成后，需要安装一下相关插件，进入到“package.json”文件的同级目录并打开dos窗体执行如下命令：npm install

13.安装完成之后，同样在“package.json”目录执行以下命令启动服务： npm run serve

14.启动成功之后，可以看到如下提示：
　　
　　　15.ok，如上提示，我们在浏览器输入：http://localhost:8080，出现如下页面表示成功了。
　　　

2 改造项目

前端框架我们使用vant，vant官网如下：https://youzan.github.io/vant/#/zh-CN/intro

2.1 安装vant
命令：npm i vant -S

说明：

npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象

npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象

npm i module_name -g 全局安装

i 是install 的简写

2.2 安装 babel-plugin-import
命令：npm i babel-plugin-import -D

2.3 项目结构介绍

2.3.1 package.json
package.json存放的是项目所需要的包，以及项目的一些配置，重点说一下dependencies是存放的程序发布时所依赖的包，devDependencies存放的是开发阶段所需要的包。每个包都有一个版本号，具体安装卸载可参考npm安装卸载包。

2.3.2 babel.config.js
babel.config.js存放的是项目所需要的插件，比如我们要引入vant插件，那么需要配置如下：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}```
主要是plugins里面的内容。

 

2.3.3 src/router.js
这个文件是路由文件，存放的路由信息，指定url过来的路由转发到哪个组件上面，如下：

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home'
import Cart from './views/Cart'
import Category from './views/Category'
import PersonalCenter from './views/PersonalCenter'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [{
    path:'/',
    redirect:'/home'
  },{
    path:'/home',
    name:'home',
    component:Home
  },{
    path:'/cart',
    name:'cart',
    component:Cart
  },{
    path:'/category',
    name:'category',
    component:Category
  },{
    path:'/personalCenter',
    name:'personalCenter',
    component:PersonalCenter
  }]
})

2.3.5 src/App.vue
这是主页面的组件，所有的主页布局在这里实现。

<template>
  <div id="app">
    <tab-bar></tab-bar>
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

我们可以看到，主页就一个tab-bar和router-view，通过tab-bar就可以将路由映射到router-view里面去。实现单页面应用。

**

3 npm安装卸载包

**
3.1 简单安装
npm i webpack -S ，这个命令就是把webpack安装到项目局部，同时指定参数-S表示安装到dependencies节点，如果将-S修改为-D，那么就安装到devDependencies节点。

3.2 全局安装
npm i webpack -S -g，这里的-g就表示全局安装，安装之后我们可以通过命令npm root -g查看全局安装所在路径。

3.3 卸载安装包
npm uninstall webpack，卸载webpack模块

npm uninstall webpack -g，卸载全局的webpack模块

3 发布
上面步骤完成之后总需要发布的，因为.vue这种格式浏览器是无法解析的，发布就是把这些类似于.vue的文件发布为浏览器能解析的js文件等。

发布命令：npm run build

注意查看日志报错，依次解决就好，比如console.log这种就要删除才行。

原文作者 段江涛IT 链接：https://www.cnblogs.com/duanjt/p/10706546.html
侵删~