VUE项目实践--网站管理系统

使用vue-cli来构建一个vue项目

什么是vue-cli？有了它我们还需要webpack吗？

通过几天的学习都知道webpack的使用难度真的有点高，而且文档又很难阅读。而vue-cli是一个可用帮助我们直接进行开发vue的脚手架（帮助我们建立项目框架），使用了vue-cli之后，我们仍然需要像webpack那样去配置一些配置文件如webpack.config.js文件。像进行开发和dev-server仍然像使用webpack那样。所以，只要将vue-cli理解为，它就只是帮助我们进行构建vue的项目骨架就好了。

 

安装

npm install -g @vue/cli

npm install -g @vue/cli-service-global

 

在vue-cli3中，使用vue create 来创建一个新的项目，或者使用vue ui来图形化创建

但是这两个命令都是在vue-cli3.0才可以使用，所以如果全局安装了旧版的，先安装3.0版本（会有提示你这么做）

vue create cli1

然后会有提示你是否需要在淘宝镜像下进行更新，选择是或者否

再后，会提示你选择什么配置，选择默认就好

命令执行完毕后，进入刚刚建立的目录，然后执行

cd cli1

npm run serve

 

这样创建之后，项目目录结构如下：

 

 

 

如果执行vue ui

vue ui

会出现下面这个界面

 

 

 

如果要安装vue的插件，可以使用vue add 如

vue add router

但仅仅可以安装vue的插件，不能安装其他的包

 

如果使用vue-cli2.0来创建一个项目目录，使用

vue init webpack demo

 

它会提醒你需要安装一个插件，按照提示安装就好

 

然后一路提示就按默认就好，安装好后的项目目录如下

 

其中，build文件夹下面的是webpack的配置

 build.js：是我们完成项目之后需要运行的， 可以将我们的项目文件打包成 静态文件，存放在项目根目录的 dist 文件夹中（现在目录里还没有这个文件夹，build的时候会自动生成）。

           check-versions.js：主要是检查一些所依赖的工具的版本是否适用，如nodejs、npm，若版本太低则会提示出来。

           logo.png：存放的是vuelogo图片。

           utils.js：提供工具函数，包括生成处理各种样式语言的loader，获取资源文件存放路径的工具函数。

           vue-loader.conf.js： 引入了utils.js ，应该是用于切换开发模式和生产模式的文件，以便于用不同模式来解析loader。

           webpack.base.conf.js：此配置文件是vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置。

           webpack.dev.conf.js：在webpack.base.conf的基础上增加完善了开发环境下面的配置。

           webpack.prod.conf.js：构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。

 

 

config文件夹是webpack的环境配置

src文件夹是我们开发代码放置的地方

           assets：主要存放一些静态图片资源的目录。

           components：这里存放的是开发需要的的各种组件，各个组件联系在一起组成一个完整的项目。

           router：存放了项目路由文件。

           App.vue：是项目主组件，也是项目所有组件和路由的出口，之后它会被渲染到项目根目录的 index.html 中显示出来，我们可以在这里写一些适合全局的css样式。

          main.js：入口文件，引入了vue模块和app.vue组件以及路由router，我们需要在全局使用的一些东西也可以定义在这里面。

static文件夹存放的是项目的静态文件。

test文件夹是测试文件目录，unit是单元测试，为每个组件编写单元测试，e2e是端到端的测试

.babelrc：ES6语法编译配置。

           .editorconfig：代码编写规格。

           .eslintignore：项目的根目录中创建文件来告诉ESLint忽略特定的文件和目录，该文件是纯文本文件。

          .eslintrc.js：eslint的配置文件，eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件，当有不符合配置文件内容的代码出现就会报错或者警告。

           .gitignore：忽略的文件。

           .postcssrc.js：兼容选项（如果已经安装postcss，需要一大堆loader配置，这时项目根目录会生成“.postcssrc.js”文件）。

           index.html：项目文件入口。

           package.json：项目及工具的依赖配置文件。

           README.md：项目说明。

 

因为我们的后台管理系统需要用到element，所以需要安装element ui

vue add element

弹出来的选择，

选择全局引入

yes

选择语言

 

安装结束后的目录结构如下

 

然后还需要安装vuex

vue add vuex

 

因为要跟后台进行交互，需要用到axios，所以也要安装axios

vue add axios

 

好了现在开始正式编程了

首先先来配置一些文件

在根目录下面建立一个vue.config.js文件，用来配置项目构建的一些选项

module.exports = {

    // 部署生产环境和开发环境下的URL。

    // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上

    //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。

    publicPath: "/",

    outputDir: "dist",

    assetsDir: "assets",

    // indexPath: "myIndex.html",

    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)

    filenameHashing: false,

    //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint

    lintOnSave: true,

    //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置

    // lintOnSave: process.env.NODE_ENV !== 'production',



    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)

    runtimeCompiler: true,



    /**

     * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

     *  打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件

     *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

     *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

     * */

    productionSourceMap: false,





    devServer: {

        host: "localhost",

        port: 8888, // 端口号

        open: true, //配置自动启动浏览器



    }

};

 

 

接下来写登录页面

要求每次访问都要先确定是否已经登录，如果已经登录就可以继续访问（登录的时间有一个失效）

 

那么我们可以将路由指向登录组件，每次都检查是否已经登录

此处需要用到了vue的导航守卫，beforeEach。

如果是按照上面的步骤进行安装配置的话，那么，vue-cli已经帮我们将rout