vue项目搭建方法

通过vue脚手架 vue-cli搭建项目

1. 基于交互式命令行的方式(vue-cli)

重要提示：vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹

所以有什么配置可以在根目录新建一个vue.config.js写上配置项

这里是修改接口和关闭eslint检查

module.exports = {
    lintOnSave: false,
    devServer: {
    	port: 8081
    }
}

反向代理：vue.config.js

module.exports = {
 lintOnSave: false,
 devServer: {
     // 设置代理
     proxy: {
         "/api": {
             target: "http://127.0.0.1:8888/api/private/v1", // 域名
             ws: true, // 是否启用websockets
             changOrigin: true, // 开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
             pathRewrite: {     // 路径重写：将 /api 替换为 / 
                 "^/api": "/"
             }
         }
     }
 }
}

1. 卸载旧版本的vue架手架

npm uninstall vue-cli -g  
	或者
yarn global remove vue-cli

2. 可以使用下列任一命令安装这个新的包

npm install -g @vue/cli （全局安装一次就好）
# OR
yarn global add @vue/cli	

3. 你还可以用这个命令来检查其版本是否正确 (3.x)

vue --version

正式构建项目

1. 安装Vue脚手架

npm install -g @vue/cli

2. 先在桌面创建文件夹 如：ele-proiect

在端口页面：运行cd(拖拽文件夹到端口页面)，点击回车

3. 创建项目（打开终端 cmd）

vue create 项目名称

例如：vue create ele-app

4.下面会询问一下问题：（可以通过上下箭头选择）

• default（babel,eslint） 默认方式创建项目

• 选择手动安装Manually select features，点击回车之后

其他参数说明：不用选择的选项
  Unit Testing 单元测试
  E2E Testing E2E（End To End）即端对端测试

• 使用空格键选择：

  • Babel、Router、Vuex、

  • Css Pre-processors、linter/formatter（语法格式校验）

  • 点击回车

• 因为我们要安装hash模式的路由而不是history历史模式的路由，所以输入n 回车

 Use history mode for router? 选择 yes

 具体参见：个人CSDN中vue收藏夹
 
 最直观的区别：就是在url中 hash 带了一个很丑的 # 而history是没有#的
 
 对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，
 用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，
 同时搭配前端路由的 404 页面支持。

• 如果前面选择了CSS预处理，这里就会让你选择安装哪种CSS预处理语言，

使用上下箭头选择一种语言之后，点击回车

* `Sass / scss`
* Less
* Stylus

• 如果前面选择了类型校验，这里会让你选择校验方式，然后回车

  • ESLint with error prevention only 仅错误预防（选择这个选项）

  • ESLint + Airbnb config （Airbnb配置）

  • ESLint + Standard config （标准模式的版本）

  • ESLint + Prettier

• 然后默认选中第一项，然后回车

  • Lint on save（一般项目选择这个） 保存时检查

  • Lint and fix on commit 提交时检查

• 选择 Babel, PostCSS, ESLint等自定义配置的存放位置

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

* `In dedicated config files ` （在专用的配置文件中）

* `In package.json` （选择这个选项）（`在package.json`）

• 将此作为将来项目的预置吗？

 Save this as a preset for future projects? 是否存储模板

5. 切换路径：cd 项目名称 例如：cd ele-app
6. 运行项目：npm run serve

2. 基于图形化界面的方式

在cmd窗口：vue ui

1. 初始化git仓库（建议）：填写init project
2. 选择四个：babel、router、Linter/Formatter、使用配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hg7mdc2R-1589472831430)(C:/Users/Administrator.BF-20180502BRSI.000/Desktop/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/vue/images/vue.png)]

3. 找到刚才创建的项目vue-project,在项目根目录运行：npm run serve

然后将url地址：http://localhost:8080/，粘贴到浏览器，查看结果，这样太麻烦了。

希望在运行命令指令后，自动弹出浏览器页面方法：需要以下操作

4. Vue 脚手架的自定义配置：

法1：通过 package.json配置项目（不推荐使用这种配置方式）

注意：不推荐使用这种配置方式。

因为 package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关的配置，
单独定义到 vue.config.js配置文件中。

// 在最底部添加下面代码，必须是符合规范的json语法
  "vue": {
    "devServer": {
      "port": "8888",
      "open" : true
    }
  }

法2：推荐使用通过单独的配置文件配置项目（需要先删除上一个方法的配置信息）

1. 在项目的跟目录 / 创建文件 vue.config.js
2. 在该文件中进行相关配置，从而覆盖默认配置: vue.config.js

module.exports = {
    devServer: {
      open : true,
      port: 8888
    }
  }

5. 运行：npm run serve

PC端

VueCli3–构建项目

1. 卸载旧版本的vue架手架

npm uninstall vue-cli -g  
	或者
yarn global remove vue-cli

2. 可以使用下列任一命令安装这个新的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli	

3. 你还可以用这个命令来检查其版本是否正确 (3.x)

vue --version

1.先在桌面创建文件夹  如：ele-proiect
2.在端口页面：运行cd (拖拽文件夹到端口页面)，点击回车
3.运行：vue create 项目名称 ；例如：vue create ele-app
4.下面会询问一下问题：
	手动选择所需要的模块：Manually  select features
    点击回车之后，需要勾选：Babel/Router/Vuex ;然后点击回车
    Use history mode for router? 选择 yes
    然后选择使用：In package.json
    Save this as a preset for future projects? 是否存储模板
    
5.切换路径：cd 项目名称 例如：cd ele-app
  运行项目：npm run serve

1. 安装Vue脚手架

npm install -g @vue/cli（全局安装一次就好）

2. 创建项目（打开终端 cmd）

vue create 项目名称

选择手动安装Manually select features

使用空格键选择（Babel、Router、Vuex、Css Pre-processors）；

选择性安装 Linter（语法格式校验）

如果选择安装：（下面全部勾选），然后点击回车

• Lint on save
• Lint and fix on commit

选择这个选项：In dedicated config files

然后依次安装就可以了！

搭建项目目录结构：

目录名称	作用
src/assets/css/global.css	全局样式文件
src/plugins/element.js	按需引入相关的element组件
assets/fonts/iconfont.css	第三方字体图标库
public/css/reset.css	初始化标签默认样式

梳理vue项目的结构，删除不必要的内容

在components/新建登录组件：Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {
     data(){
        return {
           
        }
    }
}
</script>

<style lang="less" scoped>

</style>

在路由 router.js 导入路由–添加路由规则

// 指的是引入vue.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        redirect: '/login'
    }, {
        path: '/login',
        component: Login
    }]
})

在根组件 App.vue，添加路由占位符

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

main.js

import Vue from 'vue'
// 引入router.js
import router from './router'
import App from './App.vue'


// 消息提示的环境配置
Vue.config.productionTip = false


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

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 按需加载组件
const Index = resolve => require(['./views/index.vue'], resolve)
const Login = resolve => require(['./views/login.vue'], resolve)

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        }
    ]
})

// 路由守卫
router.beforeEach((to, from, next) => {
    const isLogin = localStorage.ele_login ? true : false;
    if (to.path == '/login') {
        next();
    } else {
        // 是否在登录状态下
        isLogin ? next() : next('/login')
    }
})

export default router