美文网首页
前端Vue2.0搭建项目(一)

前端Vue2.0搭建项目(一)

作者: 北暖37 | 来源:发表于2018-07-17 10:53 被阅读38次

    一直都在写vue的项目,但是每次都是同事搭建好框架,写完基础页面,然后就是直接填鸭似的往里面放一系列的页面,自己没有实际操作过一个完整的项目流程,难得有机会需要自己去从零开始搭建一个项目,特此记录一下

    一、新建空白项目

    1、在终端 

        npm i-g vue-cli

    2、进入你放文件的目录

            vue init webpack 

    3、终端出现

            Project name      test

           Project description   项目描述

            Author                         你的信息

            Vue comes in two build versions, which do you want to use runtime

            Use ESLint to lint your code?    No

            Setup unit tests with Karma + Mocha    No

            Setup e2e tests with Nightwatch    No

    上面的选项都可以根据自己的实际情况进行选择yes还是no

    4、进入到文件夹下

            npm install

    5、 npm run dev 运行项目,就可以看到一个初始的空的工程

    1 2

    二、基础的目录已经拿到了,但是要根据自己的实际情况进行修改,文件夹的重新排版

    src文件夹styles文件下放入统一的一些重置控件的样式文件,

    3

    安装eslint,如果要修改eslint的一些初始样式,要在eslintrc.js文件下进行修改

    4

    安装sass或者less

    5

    在webpack.base.conf.js中,配置了了别名,不不需要使⽤用相对路路 径去查找对应的⽂文件,只要写对应别名的决定路路径就好了,引用的时候,就用绝对路径那样引用

    6

    最重要的,跨域问题解决

    7

    关于调试环境与正式环境的配置问题: 以前我们有遇到这样的问题,就是每⼀一次 发布测试、beta、正式时候,都需要修改本地的接⼝口域名,这样会经常遗漏漏哦与 出错,经常修改也⾮非常的麻烦;其实在vue-cli中有对应的环境判断,在config/dev.env.js 中,是本地调试环境下的配置项;在config/prod.env.js中,是 打包后发布的环境配置项;在项⽬目中可以全局获取配置(process.env.*)具体如 下: 定义(不不需要定义是具体哪个域名,直接取当前的域名即可):

    8

    使用

    10

    相关文章

      网友评论

          本文标题:前端Vue2.0搭建项目(一)

          本文链接:https://www.haomeiwen.com/subject/pkkwpftx.html