vue-cli

安装运行环境（node和npm） 安装vue-cli（查看是否安装成功vue -V） 安装webpack 新建项目 1、vue init webpack 项目名称 2、配置项目有关的信息（项目名称，开发者，描述，安装路由，使用eslint代码规范，测试单元） 3、下载依赖模块后会出现启动项目的提示命令 4、进入项目的文件夹下，，使用npm run dev来运行项目 5、运行完成后根据提示的地址进行项目的访问 6、到此项目就创建完成了，以上是页面中显示的内容 8、主要修改的是src中的文件 Assets中存放静态资源 Components中存放当前项目中用到的组件 Router中存放涉及的路由配置 App.vue当前项目的主页面组件 Main.js当前项目的vue实例创建，可以将实例的配置信息放在当前文件中 9、组件的文件中主要包含三个部分，template、script、style Template标签中放html结构（必须有且只有一个跟标签） Script中存放当前组件的数据、生命周期函数、计算属性、侦听器、方法等 Style中放样式，使用scoped可以使样式只作用于当前组件 10、路由的配置，使用path、name、component来只能路由对应的地址，名称和指定的组件，嵌套路由通过child中配置下级路由来实现，child的值是数组 来源： https://www

在项目开发的时候，接口联调的时候一般都是同域名下，但是当我们现在使用 vue-cli 进行项目打包的时候，会启动我们本地的服务器，比如域名是 http://localhost:9527 ，这种情况下我们再访问其他的接口地址，就会存在跨域的问题，请求接口就会出现错误，因此我们需要在打包的时候配置一下。 1. 开发环境 在vue-cli项目中的 config 文件夹下的 index.js 配置文件中， dev 长这样子 1 dev: { 2 // 静态资源文件夹 3 assetsSubDirectory: 'static', 4 // 发布路径 5 assetsPublicPath: '/', 6 // 代理配置表 7 proxyTable: { }, 8 // 本地访问 9 host: 'localhost', 10 } 我们修改一下： // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news

问题来啦 运行 npm run dev 以开发模式打开调试好了你的案例程序；你还不满足于仅仅把代码放在 github 上，想直接能把案例效果 build 版本的代码在本地预览或者放在你的个人博客上供大家直接看效果学习。 这时如果直接运行 npn run build 是可以运行并打包你的代码的，不会报任何异常或错误，但是你会看到你的命令行打包完成有这样一句提示： 估计看到这里你是不是第一感觉说：不是警告色，说明应该没啥问题吧，（也许是英语不过关也许是懒得不想看反正是没看这段提示是什么意思）抱着试试看的侥幸心理，默默用浏览器打开了你刚 build 生成的 dist 目录下的 index.html 文件！ 然而，你惊奇地发现网页一片空白，丝毫没有一点点痕迹。。。 接下来，你默默的打开了控制台，看到 console tab 下一片 404 的各种找不到资源；如下图： 为什么会这样呢？还得从第一幅图的 build 后的提示说起，提示的中文翻译是【提示：构建文件务必放在一个 HTTP 服务器。直接打开 index.html 文件将不工作】 所以你看到控制台里的一堆 404 ！ 解决方案 仔细看一下路径，绝对路径， F 盘下哪有 static 文件夹，那就要将打包的路径改为相对路径。这个根据 build 命令一路跟踪，到项目目录下的 config 文件夹里的 index.js 文件中的

介绍 vue-cli 是vue 官方提供的脚手架工具 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 安装新的vue-cli包： npm install @vue/cli -g 检查vue-cli是否安装正确： vue --version 创建一个 vue-cli 项目 vue cli3及以上版本： 创建项目： vue create my-project ,或使用图形化界面： vue ui 配置项目 项目目录结构: vue cli3配置去哪里了 请问Sass/SCSS(with node-sass)和Sass/SCSS(with dart-sass)选哪个？node-sass是自动编译实时的，dart-sass需要保存后才会生效 。所以选择node-sass 运行项目： npm run serve vue cli2版本项目 拉取 2.x 模板:安装一个桥接工具,这样就任然可以使用旧版本的 vue-init 功能 npm install -g @vue/cli-init 创建项目： vue init webpack my-project 配置项目 项目目录结构

创建vue项目的两种方式与区别 运行环境: 下载地址：node.js中文官网 http://nodejs.cn/download/ 工具visual studio code: https://code.visualstudio.com/ 全局安装 vue-cli ，在命令行工具中输入命令行： $ cnpm install vue-cli -g 全局安装webpack，在命令行工具中输入命令行： $ cnpm install webpack -g 安装cnpm(cnpm是淘宝的镜像，也可以使用npm, node.js自带npm） $ npm install -g cnpm --registry=https://registry.npm.taobao.org 创建vue-cli3项目 $ vue init webpack my-project 目录结构： 参考博客： https://blog.csdn.net/weixin_42756155/article/details/81144622 $ vue create project-name 目录结构： 参考博客： https://blog.csdn.net/zzsan/article/details/82667609 使用webpack初始化vue项目和vue-cli3创建项目的区别? vue-cli 内部封装了 webpack

vue-cli配置.env执行项目后自动同步static/config.js文件 下载dotenv依赖包，执行命令： npm install dotenv 在根目录下创建.env文件，内容如下： WEB_SOCKET = '192.168.1.111' 在build文件夹下新建zpreface.js文件，内容如下： const fs = require('fs') const path = require('path') const env = path.join(__dirname, '../.env') const out = path.join(__dirname, '../static/config.js') const script = function (env_file = env, out_file = out) { const { parsed } = require('dotenv').config({ path: env_file }) fs.writeFileSync(out_file, `window.zPreface = '${parsed.WEB_SOCKET}'`) } script(); module.exports = script 在static文件加下创建config.js，内容如下： window.zPreface = '192.168.1

一、安装配置 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 可以使用下列任一命令安装这个新的包： npm install -g @vue/cli # OR yarn global add @vue/cli 验证 vue --version 二、安装CLI npm install -g @vue/cli 三、新建项目 来源： CSDN 作者： MurasameFan 链接： https://blog.csdn.net/qq_34419607/article/details/104061600

之前已经创建过VUE项目，不过被我重新删除了，打算再次用vue init webpack 【项目名】新建的时候出现vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREF错误，而且ping github.com也测试不通，解决方法是修改C:\Windows\System32\drivers\etc的hosts文件，在里面添加上： 192.30.253.112 github.com 151.101.88.249 github.global.ssl.fastly.net 来源： CSDN 作者： lhj501382150 链接： https://blog.csdn.net/lhj501382150/article/details/104049495