前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue学习篇-以优雅的姿势创建vue项目

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

作者头像
DevOps云学堂
发布2019-10-18 19:16:02
1.2K0
发布2019-10-18 19:16:02
举报
文章被收录于专栏:DevOps持续集成DevOps持续集成

前言

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

开发工具Visual Studio Code

安装插件

代码语言:javascript
复制
#插件列表
Auto Close Tag
Auto Rename Tag
Beautify
Chinese (Simplified) Language 
Pack for Visual Studio Code
ESLint
Path Intellisense
Prettier - Code formatter
Vetur

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

代码语言:javascript
复制
{
"locale":"zh-CN";
}

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

代码语言:javascript
复制
{
"editor.fontSize": 15,
"eslint.autoFixOnSave": true,
"prettier.eslintIntegration": true,
"eslint.validate":  [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
}

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

Vue配置

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

安装vue

代码语言:javascript
复制
npm install -g vue-cli
npm install cnpm -g --registry=https://registry.npm.taobao.org
vue --version

新建vue项目

代码语言:javascript
复制
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) npmvue-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.jsnpm 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 detailsRunning 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 devDocumentation can be found at https://vuejs-templates.github.io/webpack

启动项目

代码语言:javascript
复制
#启动测试项目
npm run dev 或者是 npm run start
DONE Compiled successfully in 5923msI Your application is running here: http://localhost:8080

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-01-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DevOps持续集成 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 开发工具Visual Studio Code
  • Vue配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档