搜公众号
推荐 原创 视频 Java开发 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库
Lambda在线 > DevOps持续集成 > vue学习篇-以优雅的姿势创建vue项目

vue学习篇-以优雅的姿势创建vue项目

DevOps持续集成 2019-01-21
举报

前言

小白一枚,今年(2019)准备学习一下前端的技术,因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统,可见前端的重要性,于是静下心学习。在不断的激励自己调整自己的情绪,满足一下自己对技术的兴趣。

开发工具Visual Studio Code

安装插件

vue学习篇-以优雅的姿势创建vue项目

#插件列表
Auto Close Tag Auto Rename Tag Beautify Chinese (Simplified) Language
Pack for Visual Studio Code ESLint Path Intellisense Prettier - Code formatter Vetur

vue学习篇-以优雅的姿势创建vue项目

设置中文语言:command + shift + P,搜索框中输入“configure display language”,更改成以下内容,然后重启vscode。

vue学习篇-以优雅的姿势创建vue项目

{
    "locale":"zh-CN";
}

vue学习篇-以优雅的姿势创建vue项目

更改默认配置: 首选项->设置->然后点击右上角的{}->将下面的代码粘贴到里面->保存->重启工具(建议)

vue学习篇-以优雅的姿势创建vue项目

vue学习篇-以优雅的姿势创建vue项目

{
    "editor.fontSize": 15,
    "eslint.autoFixOnSave": true,
    "prettier.eslintIntegration": true,
    "eslint.validate":  [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },"html",
        "vue"
    ],
}

vue学习篇-以优雅的姿势创建vue项目

 到此基本的开发工具配置完成。

Vue配置

创建项目目录:然后拖入vscode->终端中打开,然后会显示出一个终端。

vue学习篇-以优雅的姿势创建vue项目

安装vue

npm install -g vue-cli
npm install cnpm -g --registry=https://registry.npm.taobao.org
vue --version

新建vue项目

vue学习篇-以优雅的姿势创建vue项目

ZeyangdeMacBook-Pro:~ test$ vue init webpack demo01

? Project name demo01
? Project description A Vue.js project
? Author Lizeyang <xxxxx@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "demo01".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

> fsevents@1.2.4 install /Users/zeyang/demo01/node_modules/fsevents
> node install

[fsevents] Success: "/Users/zeyang/demo01/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/zeyang/demo01/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 1305 packages from 698 contributors and audited 11083 packages in 58.494s
found 2 vulnerabilities (1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> demo01@1.0.0 lint /Users/xxx/demo01
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd demo01
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

 

启动项目

#启动测试项目
npm run dev 或者是 npm run start
DONE Compiled successfully in 5923ms 

I Your application is running here: http://localhost:8080

访问本机的8080端口验证效果


以上就是关于开发工具的基本配置和项目的创建。





vue

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《vue学习篇-以优雅的姿势创建vue项目》的版权归原作者「DevOps持续集成」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注DevOps持续集成微信公众号

DevOps持续集成微信公众号:devopsadmin

DevOps持续集成

手机扫描上方二维码即可关注DevOps持续集成微信公众号

DevOps持续集成最新文章

精品公众号随机推荐

举报