新建一个vue项目流程(问题总结)

648 阅读2分钟

构建项目流程

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
npm install -g @vue/cli //全局安装vue-cli 

vue create hello-world  //初始化项目
npm install //安装依赖
npm run dev
npm run build
$ vue init webpack project--------------------- 安装vue脚手架的命令,采用webpack打包工具,项目名是project
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------项目名称
? Project name project
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author wujy--------------------- 项目创建者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,推荐安装,是页面跳转用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no,因为这里有很多的坑,具体以后会讲
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安装单元测试,因人而异,可以自行选择
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安装e2e测试,可自行选择
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 这里说明如何启动这个服务
cd project   --------------------进入项目文件夹
npm install   ---------------------安装依赖,推荐使用淘宝镜像cnpm
npm run dev  -----------------------项目运行

1、问题:项目用了iview 标签不兼容

//解决方法  在.eslintrc.js文件中添加一下代码
rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //这一行是新增的
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
  }

2、路径问题 index.html文件引用文件路径修改(config里面的index.js文件)

3、css里面的字体路径 生产环境 webpack.prod.conf.js文件

rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      // extract: true,
      extract: false,  //extract改为false  
      usePostCSS: true
    })