设为首页收藏本站

自学IT吧论坛

 找回密码
 立即注册
搜索
查看: 457|回复: 10

[Web前端] Vue之旅-Vue环境搭建

[复制链接]
  • TA的每日心情
    开心
    2017-10-25 13:07
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    16

    积分

    Lv1码农

    Rank: 1

    积分
    16
    发表于 2017-10-25 13:28:39 | 显示全部楼层 |阅读模式
    一、准备工作:
      程序员必备环境:Node.js和Git
    二、开始工作:
      1.执行命令   $  npm install -g vue-cli
       注:-g为全局安装,如果是mac按如下写法:sudo npm install -g vue-cli
         vue-cli提供了几种模板,如下三种模式:
         Simple(太简单,就一个index.html文件)、webpack-simple(比较实用)、webpack(较全,内置有方法检查、单元测试等。)
      2.创建项目(或者说模版项目)命令格式:vue init <template-name> <project-name>  ---  vue init 模版名称 项目名称(小写英文字母)
        注:
          执行命令 vue init webpack vuetest  命令窗口会出现提示 (全部默认enter 就可以了)提示如下
          ?Project name (vuetest)   
          ? Project name vuetest
          ? Project description (A Vue.js project)
          ? Project description A Vue.js project
          ? Author (songxibin)
          ? Author songxibin
          ? Vue build standalone
        下边的提示案情况选择,是和否都可以试试,提示以此为vue-router(路由) eslint(代码检查)等。此时项目创建完毕,ctrl+c退出创建 cd vuetest进入刚才创建的vuetest项目
       3.执行命令 npm install 安装依赖。
       4.依赖安装完毕执行命令 npm run dev 运行项目,默认为本地8080端口。
       5.编译并打包,将打包好的dist丢到服务器上:
        npm run build
       三、vue+webpack构建 
        首先创建项目文件夹,进入文件(空文件)
        打开控制台或git  安装webpack 和 webpack-dev-server
        执行命令 npm install -g webpack webpack-dev-server
        项目初始化  执行命令 npm init -y
        //项目目录下安装依赖
        npm install webpack webpack-dev-server style-loader css-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
        //vue相关依赖
        npm install vue vue-loader vue-html-loader vue-style-loader  vue-hot-reload-api vue-template-compiler --save-dev
        //安装vue
        npm install vue --save
        配置文件 webpack.config.js 内容
          var path = require('path');
          var webpack = require('webpack');
          module.exports = {
            entry: './src/app.js',
            output: {
              /* 输出目录,没有则新建 */
              path: path.resolve(__dirname, './dist'),
              /* 静态目录,可以直接从这里取文件 */
              publicPath: '/dist/',
              /* 文件名 */
              filename: 'build.js'
            },
          module: {
            rules: [
              /* 用来解析vue后缀的文件 */
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
              {
                test: /\.js$/,
                loader: 'babel-loader',
             /* 排除模块安装目录的文件 */
              exclude: /node_modules/
              }
          }
        }

        app.js内容
        import Vue from 'vue'
        //import Hello from "../../src/components/Hello.vue";
        //使用全局函数注入组件,就不用import和在创建Vue对象时定义components键值
        Vue.component('Hello', require("../../src/components/Hello.vue"));
        new Vue({
          el: "#app",
          //定义template可以不用在html中插入""
          //template: '',
          //components: { Hello }
        });

        Hello.vue 内容:
        {{msg}}
        body{
          background-color:#eee;
        }
        export default{
          data(){
            return{
              msg:'this is template body vue'
            }
          }
        }

        index.html 内容
        <!doctype html>
        <html>
        <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0,mininum-scale=1.0,maxinum-scale=1.0'>
          <title>vue-webpack</title>
        </head>
        <body>
          <div id='app'></div>
          <script src='./dist/build.js'></script>
        </body>
    </html>




  • TA的每日心情
    奋斗
    6 天前
  • 签到天数: 134 天

    [LV.7]常住居民III

    0

    主题

    213

    帖子

    631

    积分

    Lv3中级程序猿

    Rank: 3Rank: 3

    积分
    631
    发表于 2017-10-25 16:08:42 | 显示全部楼层
  • TA的每日心情
    擦汗
    2018-7-23 13:43
  • 签到天数: 416 天

    [LV.9]以坛为家II

    70

    主题

    723

    帖子

    1938

    积分

    Lv5顶级架构师

    Rank: 6Rank: 6

    积分
    1938
    发表于 2017-10-30 15:07:51 | 显示全部楼层
  • TA的每日心情
    擦汗
    2018-7-23 13:43
  • 签到天数: 416 天

    [LV.9]以坛为家II

    70

    主题

    723

    帖子

    1938

    积分

    Lv5顶级架构师

    Rank: 6Rank: 6

    积分
    1938
    发表于 2017-10-30 15:08:08 | 显示全部楼层
  • TA的每日心情
    擦汗
    2018-7-23 13:43
  • 签到天数: 416 天

    [LV.9]以坛为家II

    70

    主题

    723

    帖子

    1938

    积分

    Lv5顶级架构师

    Rank: 6Rank: 6

    积分
    1938
    发表于 2017-10-30 15:08:58 | 显示全部楼层
  • TA的每日心情
    擦汗
    2018-7-23 13:43
  • 签到天数: 416 天

    [LV.9]以坛为家II

    70

    主题

    723

    帖子

    1938

    积分

    Lv5顶级架构师

    Rank: 6Rank: 6

    积分
    1938
    发表于 2017-10-30 15:09:18 | 显示全部楼层
  • TA的每日心情

    2017-12-21 09:08
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    1

    主题

    54

    帖子

    135

    积分

    Lv2初级程序猿

    Rank: 2

    积分
    135
    发表于 2017-11-28 18:29:30 | 显示全部楼层
    文章挺好就是图片不能显示啊
  • TA的每日心情
    开心
    2018-1-13 11:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    13

    帖子

    29

    积分

    Lv1码农

    Rank: 1

    积分
    29
    发表于 2017-12-20 16:48:39 | 显示全部楼层
  • TA的每日心情
    奋斗
    2019-5-17 09:18
  • 签到天数: 94 天

    [LV.6]常住居民II

    0

    主题

    228

    帖子

    710

    积分

    永久VIP会员

    积分
    710
    发表于 2018-5-27 09:35:16 | 显示全部楼层
    谢谢111111
  • TA的每日心情
    开心
    2019-5-1 17:47
  • 签到天数: 24 天

    [LV.4]偶尔看看III

    0

    主题

    47

    帖子

    129

    积分

    Lv2初级程序猿

    Rank: 2

    积分
    129
    发表于 2018-9-28 15:26:13 | 显示全部楼层
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    来自学IT吧,高薪等你拿! 立即登录 立即注册
    在线咨询
    在线咨询
    zxit_8@qq.com

    QQ|Archiver|小黑屋|自学IT吧    

    GMT+8, 2019-5-25 21:11 , Processed in 0.155367 second(s), 36 queries , Gzip On.

    © 2014-2017 自学IT吧论坛

    快速回复 返回顶部 返回列表