最新公告
  • 欢迎您光临站壳网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • vue-cli3.0安装及配置(完整版)

     点击蓝色 “程序猿的进化” 关注我哦!

    加个 “星标” ,每天一篇文章,一起学编程




     

    这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,

    这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个

    当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键 选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里 演示,我随便选了几个

    下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择,我是一直用的less

    上面这个是问你选择哪个自动化代码格式化检测,配合vscode编辑器的 Prettier – Code formatter插件,我选的随后一个

    这里第一个选项是问你是否保存刚才的配置,选择确定后你下次再创建新项目 就有你以前选择的配置了,不用重新再配置一遍了

    上边这俩意思问你像,babel,postcss,eslint这些配置文件放哪?第一个是:放独立文件放置 第二个是:放package.json里 这里推荐放单独配置文件,选第一个

    上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗?最后一个是描述项目,你随意选择,点击确定就开始下载模板了

    下载好后,项目结构就变成这样了,相比2.0精简了很多, 然后cd 进项目,启动服务npm run serve, 这里发现少了vue.config.js文件,那以前的配置怎么搞?

    上边是2.0的目录结构 

    这个是3.0的目录结构,比2.0少了好多,这些都放在@vue/文件下了,你可以打开看看

    下边你要做的就是在根目录下新建一个vue.config.js文件,进行你的配置,具体配置看文档,我在最下边简单罗列了几个

    当然如果你不想用3.0的话,还是可以继续使用2.0的,官方文档是这样说的:

    这里简单罗列vue,config.js一些配置项 当然你配置接口地址时还是通过下边这个来获取 在main.js里或者单独配置接口地址的文件里:var env = process.env.NODE_ENV console.log(env)

    // vue.config.js 配置说明// 用过vue-cli2的同学应该都知道,如果按照默认的配置,文件的路径是会有问题的,需要手动修改。比如css文件、js文件、还有图片等静态资源。新版本的脚手架修改起来就比较方便了,只需要在vue.config.js里面加上一行module.exports = {// baseUrl  type:{string} default:'/'// 将部署应用程序的基本URL// 将部署应用程序的基本URL。// 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。// https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind }/* 构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一 个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目 的字符串, 注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的*/pages: {index: {// page 的入口entry: 'src/index/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',// 当使用 title 选项时,// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 在这个页面中包含的块,默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 当使用只有入口的字符串格式时,// 模板会被推导为 `public/subpage.html`// 并且如果找不到的话,就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'}}

    // lintOnSave:{ type:Boolean default:true } 问你是否使用eslintlintOnSave: true,// productionSourceMap:{ type:Bollean,default:true } 生产源映射// 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建productionSourceMap: false,// devServer:{type:Object} 3个属性host,port,https// 它支持webPack-dev-server的所有选项

    devServer: {port: 8085, // 端口号host: 'localhost',https: false, // https:{type:Boolean}open: true, //配置自动启动浏览器// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}, // 配置多个代理}}

     

    上面是官网给出的代码,其中除了entry之外都是可选的。
    下面开始新建文件,在src文件加下新建pages文件夹:

    image.png


    里面每个文件夹都是一个单独的页面,里面有对应的js、vue、html文件。其实每一个文件夹就相当于一个单页面应用,写法和单页面相同。如果需要用到路由可以写在里面,也可以在外边单独建一个router的文件夹集中管理。这里只写出index的代码,其他都是类似的。
    index.html

     

    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>Title</title>

    6. </head>

    7. <body>

    8. <div id="index"></div>


    9. </body>

    10. </html>

    index.js

    1. import Vue from 'vue'

    2. import App from './index.vue'


    3. Vue.config.productionTip = false;


    4. new Vue({

    5. render: h => h(App)

    6. }).$mount('#index');

    index.vue

    1. <template>

    2. <div>

    3. <h1>index</h1>

    4. <a href="view1.html">view1</a>

    5. &nbsp;

    6. &nbsp;

    7. &nbsp;

    8. &nbsp;

    9. <a href="view2.html">view2</a>

    10. </div>

    11. </template>


    12. <script>

    13. export default {

    14. name: "index"

    15. }

    16. </script>


    17. <style scoped>


    18. </style>

    这里注意页面跳转是用的<a>链接,因为这是页面之间跳转,而不是路由
    接下来需要在
    vue.config.js里面进行多页面的配置。


    1. // vue.config.js

    2. const utils = require('./utils/utils');


    3. module.exports = {

    4. baseUrl: './',

    5. pages: {

    6. index: {

    7. entry: 'src/pages/index/index.js',

    8. template: 'src/pages/index/index.html',

    9. filename: 'index.html',

    10. },

    11. view1: {

    12. entry: 'src/pages/view1/view1.js',

    13. template: 'src/pages/view1/view1.html',

    14. filename: 'view1.html',

    15. },

    16. view2: {

    17. entry: 'src/pages/view2/view2.js',

    18. template: 'src/pages/view2/view2.html',

    19. filename: 'view2.html',

    20. },

    21. }

    22. }

    这里我只写了三个属性,然后运行项目就好了。

    npm run serve

    效果图

     

    之后如果要增加页面就在vue.config.js文件里面的pages选项里面增加就好了,但是如果一个一个的手动增加,感觉麻烦,也容易出错,那就再简单的配置一下自动读取到pages文件夹里面有哪些页面。
    1.首先安装
    glob模块,接下来会用到。

    npm install glob
    1. 在src同级目录新建utils文件夹,里面新建utils.js文件。

      const glob = require("glob");
      const PAGE_PATH = './src/pages'; // 注意是./ 而不是../ 这可能和commen.js的加载有关系


      module.exports = {
      getPages: () => {


      // 首先得到包含pages文件夹里面符合条件的路径数组
      let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');


      // pages就是vue.config.js里面pages选项的值,是一个对象
      let pages = {};


      // 遍历得到的路径数组,从字符串中分割出需要的页面名字
      entryHtml.forEach((filePath) => {
      let fileName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));


      // 组建pages需要的值
      pages[fileName] = {
      entry: `src/pages/${fileName}/${fileName}.js`,
      template: `src/pages/${fileName}/${fileName}.html`,
      filename: `${fileName}.html`
      }
      });
      return pages;
      }
      };

    然后在vue.config.js里面引入

    //  vue.config.jsconst utils  = require('./utils/utils');

    module.exports = {baseUrl: './',pages: utils.getPages()}


    到这里一个简单的多页面项目就算配置完了,之前也用vue-cli2配置过多页面应用,感觉vue-cli3比之前要方便也更容易配置。

    接口数据模拟

    很多时候前端在后端接口还没有开发完成的时候,需要前端自己模拟数据,这个其实也很简单。

    1. 创建json文件,存放数据
      首先在public文件夹下新建api文件夹,然后新建user.json文件,当然新建的文件夹和json文件名字是可以随意命名的。

    1. {

    2. "status": 200,

    3. "data": ["Jack", "Tom", "Rose"]

    4. }

    注意,json文件要严格按照json文件的格式

    1. 安装axios

    npm install axios

    或者

    yarn add axios

    然后再main.js文件中简单配置

    1. import Vue from 'vue'

    2. import App from './App.vue'

    3. import router from './router'

    4. import Axios from 'axios'


    5. Vue.prototype.axios = Axios;

    6. Vue.config.productionTip = false;


    7. new Vue({

    8. router: router,

    9. render: h => h(App)

    10. }).$mount('#app');

    1. 发送请求
      最后就可以请求模拟的数据了,我在我新建的index.vue文件中的mounted生命周期函数中发送请求

    1. mounted() {

    2. this.axios.get('/api/data.json').then((res) => {

    3. console.log(res, 'success')

    4. }).catch((err) => {

    5. console.log(err, 'error')

    6. })

    7. }

    注意:请求的路径必须和刚才创建的文件路径一致,否则会报404错误。

    然后在运行项目,打开index页面就可以看到打印的信息



    RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
    找源码|源码教程|小程序|免费源码 » vue-cli3.0安装及配置(完整版)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台
    • 79会员总数(位)
    • 60资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 445稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情