vue-cli脚手架安装及运行

vue-cli脚手架安装及运行

Vue是：构建用户界面的渐进式框架，可以自底向上逐层应用（大概是这个意思？由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。） （前期刚学时不建议直接安装vue-cli脚手架，可以直接通过<script></script>引入，如：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 然后直接用就行了） 1.首先Windows+R 打开cmd；输入npm -v 和node -v 检测是否安装了npm和node.js，没安装先去安装node.js（npm是随node.js一起安装的包管理工具，就不用安装了）附上node.js安装地址： 2.然后还需要淘宝镜像安装cnpm和webpack支撑（有时候安装依赖特别慢 就会用到cnpm） 淘宝镜像安装cnpm命令： 安装之后 执行cnpm -v，如果出现相应的版本号就是安装成功 webpack安装命令： 安装之后 执行webpack -v，它会问你： 直接回车就可以，然后再执行webpack -v，如果出现相应的版本号就是安装成功 3.最后就是安装vue-cli脚手架了 vue-cli脚手架安装命令： 安装之后 执行 vue -V ，如果出现相应的版本号就是安装成功 4.用vue-cli创建一个基于webpack的新项目并运行 首先可以在桌面新建一个文件夹，如：Vue 然后执行cd Vue 进入文件夹，然后输入以下命令新建项目，回车 然后根据提示一路回车，这时文件夹下就会有很多相关文件了 最后用cnpm安装依赖： 最后的最后 就是运行项目啦 输入以下命令： 或者以下命令也可以： 如果成功的话，一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了 至此，应该就可以正常访问一个新建的项目了，接下来的就是在新项目中通过组件、事件、指令等等丰富项目。

本文根据vue.js官方文档学习总结。

vue 脚手架简单安装流程

能够显示版本号，说明环境已经安装好了。 注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图： 按照提示，打开浏览器输入地址： http://localhost:8080 最终结果如下：到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。

Vue脚手架

在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为： https://cli.vuejs.org/zh/ 安装 3.x 版本的 Vue 脚手架。

输入 vue -V 如果出现版本号，就说明安装成功。

脚手架安装成功之后，就可以通过脚手架创建vue项目了。 通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下： 使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。 注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

总结 ：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行 npm install 安装所有依赖项，然后再执行 npm run serve 就可以把项目跑起来了。如果想要再给项目添加新的依赖，可以cd到项目目录，然后执行 vue ui 打开GUI，在可视化面板中就可以给项目添加新的依赖了。

VUE脚手架router安装,详解,二级配置,锚链接跳转

打开文件夹在路径栏里面输入cmd 打开cmd命令行 输入vue create router-pro 选择下面选项 按下键选择路由并回车： 选择vue2版本 问你是否使用路由的历史模式： 输入n 问你eslint的语法规范选择哪种？ 我们选择第一个最基本的格式校验 下面问你什么时候校验语法规范？ 我们选择保存的时候校验选择第一个 问是否采用最基本的校验更新到package文件？ 默认选择第一个回车 问你是否配置好了？输入y 还会跳出一个选项你可以输入y 回车 也可以直接回车 import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' //调用构造函数Vue的use方法 传入VueRouter构造函数 //作用是把VueRouter作为一个插件 全局插入到Vue中 Vue.use(VueRouter) const routes = [     {         path: '/',     name: 'home',         component: HomeView,               redirect:'one',     children:[{       path:'one',       name:'one',       component: () => import('../views/OneView.vue')     }]   },   {         path: '/about',     name: 'about',     // route level code-splitting     // this generates a separate chunk (about.[hash].js) for this route     // which is lazy-loaded when the route is visited.         component: () => import( '../views/aboutView.vue'),         redirect:'/about/aboutchild',     children:[{       path:'aboutchild',       name:'aboutchild',       component: () => import('../views/aboutChild.vue')     }]   },   {     path:'/ChildA',     name:'ChildA',     component: () => import('../components/ChildA.vue')   },   {             path:'*',     name:'notfound',     component: () => import('../components/NotFound.vue')   } ] const router = new VueRouter({   routes }) export default router import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false     new Vue({   router,     render: h => h(App) }).$mount('#app') <template>   <div id="app">     <nav>       <!-- router-link 组件是负责跳转的 to属性是用来写跳转路径的           router-link组件本质上是有a标签来实现的 路由跳转的原理是根据           锚点来的 -->       <router-link to="/">Home</router-link> |       <router-link to="/about">about</router-link> |       <router-link to="/ChildA">点我跳转ChildA</router-link> |       <router-link to="/ChildB">点我跳转ChildB</router-link> |     </nav>     <!-- router-view 组件是用来展示组件的容器 -->     <router-view/>     <!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转          组件显示在 router-view 容器中 -->   </div> </template> <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50; } nav {   padding: 30px; } nav a {   font-weight: bold;   color: #2c3e50; } nav a.router-link-exact-active {   color: #42b983; } </style> <template>   <div class="about">     <h1>This is an about page</h1>    <!-- to后面写的是路径 -->     <!-- <router-link to="/about/aboutchild">我是aboutchild</router-link> -->    <!-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 -->     <router-link :to="{name:'aboutchild'}">我是aboutchild</router-link>     <!-- 二级路由显示的容器 -->     <router-view></router-view>   </div> </template> <template>   <div>       <h1>aboutChild</h1>   </div> </template> <script> export default { } </script> <style> </style> <template>   <div class="home">     <h1>KW47冲冲冲</h1>     <router-link to="/one">ONEview</router-link>     <!-- 二级路由对应的组件容器 -->     <router-view></router-view>   </div> </template> <script> // @ is an alias to /src export default {   name: 'HomeView',   components: {  } } </script> <template>   <div>       <h1>我是ONEVIwe</h1>   </div> </template> <script> export default { } </script> <style> </style><template>   <div>       <h1>我是CHildA</h1>   </div> </template> <script> export default { } </script> <style> </style> <template>   <div>       <h1>我是ChildB</h1>   </div> </template> <script> export default { } </script> <style> </style> <template>   <div>       <h1>我是notfound</h1>   </div> </template> <script> export default { } </script> <style> </style>

vue2.0用脚手架搭建的官方例子怎么用webpack打包 如何配置

前言 vue2 然后通过以下命令安装 webpack cnpm install webpack -g 注：下面 orange 默认给出 npm 的安装方案，安装失败请自行转为 cnpm 安装 在需要创建工程的位置运行 vue init webpack-simple 工程名字<工程名字不能用中文> 或者创建 vue1.0 的项目，只需将命令换成 vue init webpack-simple#1.0 这里我们基于 2.x 开发的，直接使用第一种方法创建工程即可，下图是创建工程时的截图，需要你添加 Project name，Project description，Author. 图中已经给出下一步应该操作的步骤，我们按照步骤一步一步执行，这里 orange 不给大家一步一步列出。 注意：这里一定要使用 npm install 安装官方库，而不要使用淘宝镜像，会导致部分依赖丢失。

安装完成后，目录如下图。

然后我们运行我们的项目后浏览器会自动弹出，并展示以下页面 这里注意观察，默认给我们八个链接，可以根据这几个链接获得我们想要的学习资源，上面是必要的的链接（官方文档以及关注 vue 动态），下面是 vue 的生态系统，大家亲切的叫它们为全家桶。 二、Vue 全家桶 我们接下来介绍全家桶的安装（使用详情大家可以去初始页面的链接查看） 一句命令搞定全家桶 npm install vue-router vue-resource vuex --save package.json 已经加入了我们的全家桶，node_modules 目录下也有对应的依赖包，注意这里现在还不能用扩展之后的方法，因为我们没引入到项目中来。 src/main.js 修改如下 import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import Vuex from 'vuex' import App from './App.vue' Vue.use(VueResource) Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#app', render: h => h(App) }) 这时我们的项目就能运行对应的扩展方法了 三、集成 Sass 作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。

我们干脆在 package.json 把版本写死，然后通过 npm install 安装 在 "devDependencies": {} 中添加下面几个依赖 "node-sass": "^3.8.0", "sass": "^0.5.0", "sass-loader": "^4.0.0", 好，我们 npm install 后，就可以正式使用 sass 啦 四、目录结构建议 依赖的安装到这里差不多结束了，其它大家需要的可以自定义安装 下面给出我的目录建议供大家参考， 这里的 img 目录放置图片，script 目录放置公共的工具函数，style 目录放置我们的 sass 文件， 你查看 App.vue 文件时不难发现，默认的把样式文件给到了模块里，这样样式一直跟着模块 orange 建议大家不要这样做，因为这样十分不利于样式的模块化，注意区分与模版模块化的区别， 我们单独设置 style 目录，并在目录当中对 sass 进行模块化处理（通过 import 引入 sass 模块） 对应的 App.vue 也变得非常简洁，代码如下 <style lang="sass"> @import "/style/base.scss"; </style> 五、rem 适配 对于移动端的开发，rem 适配必不可少，我们可以用多种方式实现，下面给出一种方案 在 index.html 中添加如下代码 <script> let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ; html.style.fontSize = window.rem + 'px'; </script> 这里基于宽 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多数设计稿都是根据 iphone6 的宽（ 375px ）走的，建议大家在这里分成 25 份，也就是 1rem = 15px，计算起来方便些。 简单说下 rem 原理：根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。 我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的 总结 以上就是这篇文章的全部内容了，本文作为移动端配置的基础篇，深入了解框架后才能继续构建网站，希望这是一个好的开始，有了这个架子再填充代码就方便了许多，不用再去考虑开发环境问题了。

希望本文的内容对有需要的朋友们能有所帮助。

脚手架搭建的vue2项目中使用sass

1.�