vue-cli

环境说明 搭建脚手架需要使用node环境，关于node的安装参考： 安装Node.js 使用npm和cnpm都可以搭建脚手架，但是由于npm安装速度慢，所以使用淘宝镜像cnpm。 打开DOS窗口，输入命令： npm install cnpm -g --registry=https://registry.npm.taobao.org 接着输入： cnpm --version 查看版本，即可确定是否安装成功 搭建脚手架 全局安装vue-cli 全局安装vue-cli，在DOS窗口输入如下命令： cnpm install --global vue-cli 成功安装 超级基于webpack模板的新项目 使用cd命令跳转到你想要创建项目的目录下去创建一个基于 webpack 模板的新项目，请继续输入如下命令： vue init webpack my-vue-project 注意：其中的"my-vue-project"是你自己创建的基于webpack模板的项目名称，自定义的。并且项目名称不能包含大写字母。 在确认创建项目后，会要求你输入项目名称、项目描述、作者、打包方式等。 安装成功后，会生成如下文件目录： 其中各个文件的作用如下： ├── build/ # webpack 编译任务配置文件: 开发环境与生产环境 │ └── ... ├── config/ │ ├── index.js #

前言 这是一个基于vue-cli构建的前端项目，外观尽可能去还原app的样式，但是因为水平有点渣，好多地方都是得过且过，罪过罪过，这个项目主要还是面向新手吧~希望和大家多学习学习 技术栈 vue vuex vue-cli vue-router axios mint-ui 说明 登录注册采用的是localStorage存储形式，部分数据采用express的get请求方式，所以项目需download到本地运行。本想着是自己写一个node的服务的，但是写不粗来啊，怎么办嘞，希望下个轮子可以实现，奋斗ing 项目部分截图 Build Setup 安装依赖 npm insatll 启动项目 npm run dev 打包上传 npm run build 项目地址 https://github.com/Recklesslm... 如果这个项目对你有帮助的话请给个star鼓励一下，多谢啦 License MIT 来源： https://www.cnblogs.com/10yearsmanong/p/12218509.html

安装 vue-cli npm install vue-cli -S 本地安装 npm install vue-cli -G 全局安装 用vue-cli来构建项目 vue init webpack study study是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。 项目创建成功 cd 到项目目录 npm run dev 启动项目 简单使用 vue-cli 打包 1.将 config/index.js 中的build:{}中的 assetsPublicPath: ‘/’,改为 assetsPublicPath: ‘./’, build : { // Template for index.html index : path . resolve ( __dirname , '../dist/index.html' ) , // Paths assetsRoot : path . resolve ( __dirname , '../dist' ) , assetsSubDirectory : 'static' , assetsPublicPath : './' , //改这里！！！！！ 2.执行命令： npm run build 3.安装http-server 后 运行http-server 可本地服务器访问 *常用技巧 1.打包后ttf字体图标路径问题

如果您还没有搭建vue-cli项目，那么请参考 https://www.cnblogs.com/xiaobaibubai/p/7560416.html 这篇博客,搭建好的vue-cli项目结构如下： 1.cmd控制台输入安装vant的命令 　 npm i vant -S ：这是简写形式。 　npm install vant --save :这是完整写法。 2.如果您不确定是否安装成功，那么我们可以去node_modules中查看 3.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入 npm i babel - plugin - import - D 或者 npm install babel - plugin - import -- save - dev 4.接下来我们去.babelrc中配置一下 { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -global vue-cli vue init webpack my-project cd my-project cnpm install cnpm run dev 来源： https://www.cnblogs.com/cl94/p/12210440.html

本文讲解vue-cli脚手架根目录文件.eslintrc.js eslint简介 eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告 安装eslint npm init -y npm install eslint --save-dev node_modules\.bin\eslint --init 初始化配置文件，此配置文件配置好之后，vscode编辑器自动识别 vue-cli的.eslintrc.js配置文件的解释 // http://eslint.org/docs/user-guide/configuring module.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析 parser: 'babel-eslint', //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式 parserOptions: { sourceType: 'module' }, //此项指定环境的全局变量

利用 vue-cli引入第三发postcss插件的过程 默认情况下vue-loader 也是按postcss进行css加载的 故修改webpack配置文件跟平时不太一样 如下提供三种方法（以填入tailwindcss插件为例） （1）直接在根目录的postcssrc.js添加插件（插件名称用引号括住 后面的大括号是插件选项）。. (2)删除postcssrc.js 在根目录下建立postcss.config.js （3）直接在vue-loader配置文件里添加我们的postcss插件tailwindcss的引入是postcss：[require(‘tailwindcss’)] 一下是官方文档地址 https://vue-loader-v14.vuejs.org/zh-cn/features/postcss.html https://github.com/michael-ciniawsky/postcss-load-config 还有一个小坑 vue-cli的dev-server模式下主index.html引入css 路径被做了限制只可以在static文件夹内引入 来源： CSDN 作者： 星须沉大海 链接： https://blog.csdn.net/qq_40067879/article/details/103753328

最近我们的项目选择用vue来做开发，在这个过程IE兼容性 首先我们按照步骤来安装vue-cli 创建项目运行 npm install npm run dev 然后我们在ie9下打开发现没有用但是vue官网告诉我们他是兼容ie9的 官网地址： https://github.com/vuejs/vue 下图是错误提示ie9： 然后就找资料查文档，总算给我找到了。 要实现其实很简单，只需要我们下载一个babel-polyfill， npm install babel-polyfill --save-dev 下载完成后我们怎么用它 这时我们要找到build文件夹下webpack.base.conf.js在里面修改一下就行了 module.exports = { entry: { app: './src/main.js' }, 改成 module.exports = { entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.js' }, 就ok了 是不是很简单 第二问题就是axios的请求在ie下没有用 这个怎么解决？ 也是就是下载一个js的问题 下面就直接贴代码 npm install es6-promise --save-dev /*main.js下*/ import promise from 'es6-promise

不知道有没有童鞋出现过全局安装vue-cli是成功的，但是创建项目时命令行报了很多错误，如下 本来是需要按照提示依次切换到项目文件夹，再npm run dev 即可完成项目创建并启动的，但是又报了如下错误 经过排查，发现整个项目文件夹下竟然没有node_modules文件（这个我也不知道什么原因），所以就想着应该是需要手动下载一下依赖吧 即npm install 但是也不行，还报了以下的错 于是乎，在网上进行了搜索查找，成功的找到了这行神奇的命令 npm cache clean --force 再于是乎，成功啦！ 8080也可以打开了，感谢大神，但是写这篇记录的时候，已经把大神的帖子关闭了，所以没法注明出处进行感谢了，但是希望可以帮助到有这样疑问的小伙伴们，至于这种问题的原因嘛。。。 好的，下面是我又从网上找到的原因，涨姿势~ npm install不成功的解决办法是？ ——执行npm cache clean --force（有些人这样还是没有用的话，删除package-lock.json再重新尝试一下即可。） 那么问题来了，为什么会出现npm install不成功的问题呢？ 可以先看下npm install的执行过程： 1，发出npm install命令 2，npm 向 registry 查询模块压缩包的网址 3，下载压缩包，存放在~/.npm(本地NPM缓存路径)目录 4

Vue-cli 项目结构 vue-cli 为我们搭建开发所需要的环境 目录结构及主要功能 |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- src // 源码目录 | |-- components // vue公共组件 | |-- store // vuex的状态管理 | |-- App.vue // 页面入口文件 | |-- main.js //