zoukankan      html  css  js  c++  java
  • 【vue】创建一个vue前端项目,编译,发布

    npm: Nodejs下的包管理器。

    webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

    vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

    【一】mac检查是否安装node.js

    nvm --version
    =>0.33.9
    
    node -v
    =>v10.7.0
    View Code

    【二】安装web-pack -g

    cnpm install webpack -g
    View Code

    【三】安装vue-cli

    cnpm install --global vue-cli
    View Code

    【四】创建一个vue项目。

    $ vue init webpack my-self-project
    
    ? Target directory exists. Continue? Yes
    
    ? Project name my-self-project
    ? Project description A Vue.js project
    ? Author shangxiaofei <shangxiaofei@meituan.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests Yes
    ? Pick a test runner jest
    ? Setup e2e tests with Nightwatch? Yes
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli · Generated "my-self-project".
    View Code

    【五】构建项目,进入项目的根目录,执行如下命令

    $ cnpm install
    ✔ Installed 58 packages
    ✔ Linked 87 latest versions
    Downloading https://cdn.npm.taobao.org/dist/chromedriver/2.41/chromedriver_mac64.zip
    Saving to /var/folders/38/_q18xrkj2j7bhklb_kpgfdx00000gn/T/chromedriver/chromedriver_mac64.zip
    Received 782K...
    Received 1564K...
    Received 2346K...
    Received 3128K...
    Received 3910K...
    Received 4691K...
    Received 5473K...
    Received 5625K total.
    Extracting zip contents
    Copying to target path /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.0@chromedriver/lib/chromedriver
    Fixing file permissions
    Done. ChromeDriver binary available at /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.0@chromedriver/lib/chromedriver/chromedriver
    ✔ Run 1 scripts
    Recently updated (since 2018-07-30): 3 packages (detail see file /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/.recently_updates.txt)
    ✔ All packages installed (91 packages installed from npm registry, used 8s(network 3s), speed 202.91kB/s, json 89(547.32kB), tarball 16.78kB)
    View Code

    【六】发布项目

    cnpm run dev
    
    > my-self-project@1.0.0 dev /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     95% emitting                                                                        
    
     DONE  Compiled successfully in 3121ms                                                                                           15:10:52
    
     I  Your application is running here: http://localhost:8080
    View Code

     

  • 相关阅读:
    mysql 应用 持续更新2 转载
    sql server 用触发器记录增删改操作(转载)
    mysql 应用 持续更新
    oracle 常用指令(持续更新中....)
    转载-Oracle 数据库导入导出 dmp文件
    Web Service 服务无法连接Oracle数据库
    关于jquery获取服务器端xml数据
    Navicat Premium 自动备份mysql和sqlserver
    浅谈如何更好的打开和关闭ADO.NET连接池
    JSON 的优点
  • 原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.html
Copyright © 2011-2022 走看看