vue-cli

vue项目基础结构 一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。 1.vue-cli：搭建基本的vue项目骨架，脚手架工具 2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以 3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。 4.vuex:管理复杂的数据流向，状态机工具，特化的Flux 5.vuex-persistedstate:将vuex中state持久化的工具 6.vue-router:实现SPA间“页面”之间的跳转 7.vue-lazyload:实现图片的懒加载，优化http传输性能 8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成 9.better-scroll:实现列表滚动及父子组件间的滚动问题 10.axios:http工具，实现向API请求数据，以及拦截器的实现

基于webpack的配置调试 # 使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法： Copy npm install -g @vue/cli # 全局安装vue-cli,版本vue3.x vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。 cd my-project # 进入目录 npm install # 安装依赖 (package.json) npm start # 启动开发环境版本 在 config/index.js 文件中更改 devtool 配置为 source-map ： Copy module.exports = { devtool: 'source-map',//默认是：cheap-module-eval-source-map } 设置为 source-map ，则可以生成 .map 文件，在chrome浏览器中调试的时候可以显示源代码,效果如下: cheap-module-eval-source-map 选项效果： webpack中 devtool 的其它选项各代表什么呢： # eval ：文档上解释的很明白，每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL source-map ：这是最原始的 source-map

版本号 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Hello.vue │ └── main.js └── static webpack配置 主要对build目录下的webpack配置做详细分析 webpack.base.conf.js 入口文件 entry entry: { app: '.src/main.js' } 输出文件

1.下载安装 执行下载命令：npm i axios - S / npm install axios -- save - dev 查看是否安装成功： package.json里 main.js里引入 index.vue页面data外面接接口 mounted:function ( ) { this.axios.get ( "http://news-at.zhihu.com/api/4/news/latest" ) .then ( res = > { this.conList = res.data.stories ; this.swiperList = res.data.top_stories ; } ) ; this.axios.get ( "http://news-at.zhihu.com/api/4/news/before/20131119" ) .then ( res = > { this.histroy = res.data.stories ; } ) ; } 2.如果需要解决跨域问题 执行安装命令： npm i vue-axios -S 查看是否安装成功： package.json里 main.js里引入 新建目录 ：vue.config.js vue.config.js里写 module . exports = { devServer : { proxy : { '/api

1.安装nodejs https://nodejs.org/en/download/ 2. 查看版本 npm -v node -v 3.安装淘宝npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 4.安装全局vue-cli脚手架 npm install -g vue-cli 或者 cnpm install --global vue-cli 5.创建项目 1)vue init webpack 项目名 2)cd 项目名文件夹 3)运行项目 npm run dev 4)http://localhost:8080 6.安装 elementUI npm i element-ui -S 来源： CSDN 作者： 诗意亭序 链接： https://blog.csdn.net/u011171361/article/details/104464499

在将vue基础学完之后，熟悉了webpack的基础配置今天学习vue/vli 在开始安装的时候 npm i -g @vue/cli安装失败。错误提示。乱七八糟看不懂。然后运用管理员权限，提示core-js版本低，然后将core-js@2卸载 npm uninstall core-js@2.下载了npm install core-js@3. vue/cli安装要再有vue。webpack的项目下安装 在使用element-ui编辑时，首先下载element-ui的安装包。在index.js文件import // 手动配置element-ui import ElementUI from ‘element-ui’; 引入js import ‘element-ui/lib/theme-chalk/index.css’;Vue.use(ElementUI); 引入css 在编译时 npm run serve运行出错，说没有安装依赖core-js。然后我就npm i core-js。又出错了。 我就多运行了几次，又成功了。搞不懂 来源： CSDN 作者： weixin_43145591 链接： https://blog.csdn.net/weixin_43145591/article/details/104458273

使用Vue-Cli 4.x脚手架项目初步搭建 1. 前提： node的版本要在8.11.0+，并配置好node 的环境变量 2. 如果之前电脑中安装多其他版本的脚手架需要卸载掉其他的版本， 重新安装4.x版本 **npm uninstall -g vue-cli** 3. 安装最新版本脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 安装后查看脚手架的版本 **vue --version** 或 vue -V 注意： 如果在使用命令行时出现 vue 不是内部或外部命令 需要在C盘根目录下搜索 vue.cmd 然后找到node_global文件的vue.cmd; 讲文件路径添加到系统的环境变量path中 再运行刚才的命令就可以了 4. 生成vue项目 在cmd中进入想要存放代码的路径然后输入命令 vue create 项目名 注意： 项目名要小写 项目名不能出现大写字母 选择 Manually select features 自定义配置 按空格键选中和反选 Babel (必选) 是一个 JavaScript 编译器， Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 TypeScript

学习——前戏： 0. 安装vue-cli前，先安装Node.js, 因为vue-cli 安装是给予npm（包管理工具）来进行安装的， npm:全称为：‘Node Package Manager’,是一个基于‘Node.js’的包管理器，也是整个‘Node.js’社区最流行、支持的第三方模块最多的包管理器。 webpack 是 JavaScript 打包器(module bundler) 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用 1.创建一个Vue应用 有两个重要部分组成：视图+脚本 //视图代码部分 <div id="app"> { { message } } { { name } } </div> //两对大括号代表成为模板，用来进行数据的绑定显示在页面中 //脚本代码 var app = new Vue( { el: '#app', //"el" 指定关联的选择器 data: { // "data" 用于存储数据 message : 'Hello Vue!' , name : "Vue" //对视图中声明的变量进行初始化 } } ) ; 2.数据与方法 //一个Vue实例 var vm=new Vue（ { data: { } } ） 3.生命周期 自己去搜索那张流程图 4.模板语法-插值