Rumah hujung hadapan web tutorial js Vue.js开发环境搭建

Vue.js开发环境搭建

Dec 07, 2016 am 11:04 AM
vue.js

一、简介

Vue.js 是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

vue.js的特点:

易用: 已经会了HTML,CSS,JavaScript?即刻阅读指南即可开始构建应用!

灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

二、环境搭建

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

npm: Nodejs下的包管理器

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

vue-cli: 用户生成Vue工程模板

开始安装:

1.nodejs由于我已经安装好了,跳过

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

2.webpack

npm install webpack -g
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

3.安装vue脚手架

npm install vue-cli -g
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

测试:

在硬盘上找一个文件夹放工程用的,在终端中进入该目录

cd 目录路径
Salin selepas log masuk

根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

工程目录如图所示:

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

安装项目依赖:

安装 vue 路由模块vue-router和网络请求模块vue-resource

进入该项目执行

npm install vue-router vue-resource --save
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

启动项目

npm run dev
Salin selepas log masuk
Salin selepas log masuk

运行就报错

&#39;NODE_ENV&#39; 不是内部或外部命令,也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the yy-ydh-web@1.0.7 start script &#39;npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile&#39;.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

这是windows不支持NODE_ENV=development的设置方式

解决方法:

●安装across-env: npm install cross-env --save-dev

●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

运行还是报错:

找不到webpack这个模块

module.js:457 throw err; ^Error: Cannot find module &#39;webpack&#39; at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)
Salin selepas log masuk

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

安装该模块:

安装该模块:

ccnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
Salin selepas log masuk

安装好后运行又报这个模块的错:

Error: Cannot find module &#39;bl&#39; at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)
Salin selepas log masuk

接着继续安装

cnpm install bl --save-dev
Salin selepas log masuk

再运行:

npm run dev
Salin selepas log masuk
Salin selepas log masuk

   wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

访问: http://localhost:8080/ 运行成功

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Gunakan vue-cropper untuk memangkas imej dalam projek vue Gunakan vue-cropper untuk memangkas imej dalam projek vue Oct 31, 2022 pm 07:16 PM

Bagaimana untuk memangkas imej dalam projek vue? Artikel berikut akan memperkenalkan kepada anda cara menggunakan vue-cropper untuk memangkas imej saya harap ia akan membantu anda!

Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Jan 06, 2023 pm 09:21 PM

Kata Pengantar: Dalam pembangunan vue3, reaktif menyediakan kaedah untuk melaksanakan data responsif. Ini adalah API yang kerap digunakan dalam pembangunan harian. Dalam artikel ini, penulis akan meneroka mekanisme operasi dalamannya.

Pertempuran praktikal: Bangunkan pemalam dalam vscode yang menyokong fail vue untuk melompat ke definisi Pertempuran praktikal: Bangunkan pemalam dalam vscode yang menyokong fail vue untuk melompat ke definisi Nov 16, 2022 pm 08:43 PM

vscode sendiri menyokong komponen fail Vue untuk melompat ke definisi, tetapi sokongannya sangat lemah. Di bawah konfigurasi vue-cli, kami boleh menulis banyak penggunaan fleksibel, yang boleh meningkatkan kecekapan pengeluaran kami. Tetapi kaedah penulisan fleksibel inilah yang menghalang fungsi yang disediakan oleh vscode itu sendiri daripada menyokong melompat ke definisi fail. Untuk serasi dengan kaedah penulisan yang fleksibel ini dan meningkatkan kecekapan kerja, saya menulis pemalam vscode yang menyokong fail Vue untuk melompat ke definisi.

Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Apr 24, 2023 am 10:52 AM

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

Terokai cara menulis ujian unit dalam Vue3 Terokai cara menulis ujian unit dalam Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.

Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Dec 02, 2022 pm 09:11 PM

Bagaimana untuk mengendalikan pengecualian dalam komponen dinamik Vue3? Artikel berikut akan membincangkan kaedah pengendalian pengecualian komponen dinamik Vue3 Saya harap ia akan membantu semua orang.

Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Dec 15, 2022 pm 12:54 PM

Perbezaan antara komponenisasi dan modularisasi: Modularisasi dibahagikan dari perspektif logik kod; ia memudahkan pembangunan berlapis kod dan memastikan bahawa fungsi setiap modul berfungsi adalah konsisten. Pengkomponenan adalah perancangan dari sudut antara muka UI pemkomponenan bahagian hadapan memudahkan penggunaan semula komponen UI.

Perbincangan mendalam tentang cara vite menghurai fail .env Perbincangan mendalam tentang cara vite menghurai fail .env Jan 24, 2023 am 05:30 AM

Apabila menggunakan rangka kerja Vue untuk membangunkan projek bahagian hadapan, kami akan menggunakan berbilang persekitaran apabila digunakan Selalunya nama domain antara muka yang dipanggil oleh pembangunan, ujian dan persekitaran dalam talian adalah berbeza. Bagaimanakah kita boleh membuat perbezaan? Iaitu menggunakan pembolehubah dan corak persekitaran.

See all articles