一直都在写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
网友评论