vue 2.0 开发实践总结之入门篇

   <p>整体项目采用  vue +  vue-router +  vuex （传说中的vue 全家桶 ），构建工具使用尤大大推出的vue-cli</p>    <p>项目是图片分享社交平台。   项目预览：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c488b8125a2e802da66de106a593a78f.gif"></p>    <h3>1 .vue-cli构建工具必知 </h3>    <p>我选用的vue-cli 是基于webpack的版本 ，不了解webpack的可以先粗略看下下面的基本知识</p>    <p>webpack 基本知识点：</p>    <p>entry：入口点，webpack会从入口点设置的js文件开始对项目进行构建，过程中，所有入口点通过import或者require依赖的包，都会被打包到output中制定的文件和路径；</p>    <p>output：中设置打包好的文件的输出路径还有文件名；</p>    <p>module：主要是loaders，loaders是webpack进行打包的解析器，css、vue、babel、scss都需要用npm安装相应的loader，webpack才能对该格式的文件进行解析和处理；</p>    <p>plugins：是一些webpack的打包插件，跟解析的语言无关，用来辅助构建，提供丰富的附加功能。</p>    <p>vue-cli 安装</p>    <p>1. 首先，安装 vue-cli。(确保你有 node 和 npm)</p>    <pre>  <code class="language-javascript">npm i -g vue-cli  </code></pre>    <p>2.创建一个 webpack 项目并且下载依赖</p>    <pre>  <code class="language-javascript">vueinitwebpackdemo  cddemo  npm i  </code></pre>    <p>3. 运行</p>    <pre>  <code class="language-javascript">1 npmrundev    //npm run xxx 是执行配置在package.json中的脚本，e.g: 它会去找到package.json的scripts对象，执行node bulid/dev-server.js  </code></pre>    <p>4. 构建</p>    <pre>  <code class="language-javascript">npmrundev  //运行结束后，在当前目录下会在生成 dist 目录，将dist目录放在服务器上，使用服务器上访问index.html的url即可  </code></pre>    <p>若打包之后，项目的静态文件出现引用路径问题，可于项目目录 config/index.js 修改以下数据</p>    <pre>  <code class="language-javascript">module.exports = {   build:{      assetsSubDirectory: 'static',  //修改这里成你项目放置静态文件的目录      assetsPublicPath: './',    //修改这里成你项目放置静态文件的目录   }  }  </code></pre>    <p>在静态文件 index.html 文件下， 引用静态文件</p>    <pre>  <code class="language-javascript">1 linkrel="stylesheet" href="static/css/icon/iconfont.css"/>  </code></pre>    <p>vue支持scss 配置</p>    <p>1.安装以下模块</p>    <pre>  <code class="language-javascript">npminstallnode-sass --save-dev  npminstallsass-loader --save-dev  //--save-dev 会将该依赖写入package.json，方便别人安装依赖  </code></pre>    <p>2.打开webpack.base.config.js在loaders里面加上</p>    <pre>  <code class="language-javascript">{    test: /\.scss$/,    loaders: ["style", "css", "sass"]  }  </code></pre>    <p>3.在需要用到scss的地方写上</p>    <pre>  <code class="language-javascript"><stylelang="scss"><![CDATA[ ]]></style>  </code></pre>    <h3>2. 项目整体架构 </h3>    <p>项目整体目录如下</p>    <pre>  <code class="language-javascript">--build    --config    --dist  //npm run build 之后再生成的目录  --src      --components  // 用于存放组件    --page    //页面组件，由vue-router引入    --router  //路由    --store  // 数据流管理    main.js  //入口文件    app.vue  //主组件  --static  //静态文件目录  .babelrc      .gitignore  //git忽略上传文件  index.html  //静态文件入口  package.json  </code></pre>    <p>main.js</p>    <p>入口文件，主要作用是初始化vue实例并使用需要的插件</p>    <pre>  <code class="language-javascript">importVuefrom 'vue'  importrouterfrom './router/router'  importstorefrom './store/store'     Vue.config.debug = true  //开启debug模式  window.log = console.log  letdata = {    router,    store  }  new Vue(data).$mount('#app')    //创建一个app实例，并且挂载到选择符#app匹配的元素上   在根目录html里面  </code></pre>    <p>挂载到#app ，此处看一下尤大大给的生命周期图，以下的意思是，假如new vue 的时候，有显示的 el 属性</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7fa565d76f332a44ba07bb6e22a73246.png"></p>    <pre>  <code class="language-javascript">letdata = {    el:'#app',     router,    store  }  </code></pre>    <p>则无须手动挂载到选择符#app匹配的元素上</p>    <p>app.vue</p>    <p>app.vue是我们的主组件，所有页面都是在App.vue下进行切换的,由于app.vue在所有页面都有，我们将会在app.vue上面写一些初始化全局方法。</p>    <p>考虑到 组件 header，footer，loading动画基本整个项目都会使用到，app.vue代码如下</p>    <pre>  <code class="language-javascript"><template>    <divclass="com-app">      <com-header></com-header>          <transition:name="transitionName">        <router-viewclass="child-view"></router-view>      </transition>      <com-footerv-show="isFooter"></com-footer>      <com-loadingv-show="loading"></com-loading>    </div>  </template>  </code></pre>    <p>由于footer，loading在整个项目中会频繁地改变，故v-show</p>    <p>v-if       如果条件为false，它什么也不做，加载速度较快。当条件为真时，v-if 才会真正编译渲染页面结构</p>    <p>v-show 渲染页面结构后，通过 “display:none” 控制元素状态</p>    <p>router根据不同路由跳转目录,按需加载相应的组件</p>    <pre>  <code class="language-javascript">const routes = [    {      path: '/',      component: App,      children: [        {path: '/index/:type', name: 'index', component: Index},        {path: '/home', name: 'home', component: Home},        {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},        {path: '/article/:id', name: 'article', component: Article},        {path: '/addmsg', name: 'addMsg', component: AddMsg},        {path: '/search/:types', name: 'searchresult', component: SearchResult},        {path: '/login', name: 'login', component: Login},        {path: '/register', name: 'register', component: Register},        {path: '/modif', name: 'Modifi', component: Modifi},        {path: '/admin', name: 'Admin', component: Admin}      ]    }  ]  const router = new VueRouter({    routes: routes, // short for routes: routes    linkActiveClass: 'active',  // router-link的选中状态的class，也有一个默认的值    history: true  })  </code></pre>    <p><img src="https://simg.open-open.com/show/498c421036c410f0998780930b25e8f8.png"></p>    <p>后续更新 项目中遇到的难点，以及vuex使用～</p>    <p>如果有任何出错的或者更好的，请联系我或者评论！</p>    <p> </p>    <p>来自：http://web.jobbole.com/89423/</p>    <p> </p>